@section('title', '- Create publication')

@extends('layouts.user-profile', ['withOutAside' => true])

@section('breadcumb')
    <ol class="breadcrumb col-12">
        <li><a href="/">Home</a></li>
        <li class="active">Account</li>
    </ol>
@endsection

@section('section-body')
    @if (isset($article) && $article->status == 'expired')
        <div class="alert alert-danger">
            @lang('products.article_expired')
        </div>
    @elseif(isset($article) && ($article->stock==0 && $article->service != true))
        <div class="alert alert-danger">
            @lang('products.sold')
        </div>
    @else

        <h3>@lang('products.title_product')</h3>
        <hr>
    @endif

    <div class="row">
        <div class="col-lg-7 col-md-6 col-12">
            <label for="">@lang('products.title')</label>
            <input type="text" id="title" class="form-control" name=""
                   value="@if (isset($article)) {{ $article->name }} @endif">
            <br>
            <label for="">@lang('products.description')</label>
            <textarea name="name" id="description" class="form-control" rows="4"
                      cols="80">@if (isset($article)) {{ $article->description }} @endif</textarea>
            <br>
            <label for="">@lang('products.price')</label>
            <div class="row">
                <div class="col-md-12">

                    <input type="number" id="price" class="form-control" name=""
                           value="@if (isset($article)) {{ floatval($article->price) }} @endif">
                </div>
            </div>
            <br>
            <div class="" id='quantity-container'>
                <label for="">@lang('products.quantity')</label>
                <input type="number" id="stock" class="form-control" name="stock"
                       value="@if (isset($article)) {{ floatval($article->stock) }} @endif">
            </div>

            <br>

            <label for="">@lang('products.images')</label>
            <div class="row">
                <div class="col-md-12">
                    @if(isset($article))
                        @foreach($article->photos as $photos_old)
                            <div class="" id='image-old-{{$photos_old->id}}'>
                                <div class="col-md-4">
                                    <input value="{{$photos_old->id}}" type="number" name="photos_old[]"
                                           class="inputfile inputfile-4"/>
                                    <img onclick="deleteImgOld('{{$photos_old->id}}')" title="Delete img"
                                         src="{{$photos_old->file}}"
                                         class="img-responsive img-preview center-block delete-img"
                                         style="display: inline-block">
                                </div>
                            </div>
                        @endforeach
                    @endif
                    <div class="" id='inputs-image'>
                    </div>

                    <div class="col-md-3">
                        <div class="" id='add-image' style='margin-top: 35px; text-align: center;'>
                            <i class="fa fa-3x fa-plus"></i>
                            <span>Add more image</span>
                        </div>
                    </div>
                </div>
            </div>
            <br>

            <label for="">@lang('products.status_title')</label>
            <br>
            <label for="" class="Text-Style-3"> <input type="radio" name="condition" class='condition-type' value="1"
                                                       @if (isset($article) && $article->is_new == 1) checked @endif>
                @lang('products.new')</label>
            <label for="" class="Text-Style-3"> <input type="radio" name="condition" class='condition-type' value="0"
                                                       @if (isset($article) && $article->is_new == 0) checked @endif>
                @lang('products.used')</label>
            <label for="" class="Text-Style-3"> <input type="radio" name="condition" class='condition-type' value="3"
                                                       @if (isset($article) && $article->is_new == 3) checked @endif>
                @lang('products.service')</label>
            <hr>
            <label for="" class="checkbox-article">
                <input type="checkbox" name="delivery" id="delivery" class='condition-type' checked>
                Product with Delivery
            </label>
            <label for="" style="margin-left: 25px;" class="checkbox-article">
                <input type="checkbox" name="pickup" id="pickup" class='condition-type' checked>
                Product with Pickup
            </label>

            <div class="address_select" id="address_select">
                <p>Select the address where the product is located</p>
                <select name="address_user" id="address_user" class="form-control">
                    <option value="">Select Address</option>
                    @foreach ($addresses as $address)
                        <option value="{{ $address->id }}">{{ $address->address }}</option>
                    @endforeach
                </select>
                <br>

                <div class="col-md-4 box-address" align="center">
                    <a href="javascript:void(0)" class="address_select_new">
                    <!-- <a href="{{ route('account.address.create') }}" class="address_select_new">-->
                        <p><img src="{{ url('/imagenes/add.png') }}" class="add_little"></p>
                        <p>Add a new address</p>
                    </a>
                </div>
            </div>

            <hr class="product-info">
            <h4 class="product-info">Product Information</h4>
            <div class="col-md-4 product-info">
                <label for="" class="Text-Style-3">Width</label>
                <input value="0" type="number" class="form-control" name="width" id="width" onchange="sizeCalculate()">
            </div>
            <div class="col-md-4 product-info">
                <label for="" class="Text-Style-3">Large</label>
                <input value="0" type="number" class="form-control" name="weight" id="weight"
                       onchange="sizeCalculate()">
            </div>
            <div class="col-md-4 product-info">
                <label for="" class="Text-Style-3">Height</label>
                <input value="0" type="number" class="form-control" name="height" id="height"
                       onchange="sizeCalculate()">
            </div>

            <div class="col-md-6 product-info">
                <label for="" class="Text-Style-3">Max allowed weight: <span id="maxsize"></span> pounds </label>
            </div>
        </div>
        <div class="col-lg-5 col-md-6 col-12">

            <div class="row">
                <div class="col-md-12">
                    <label for="">@lang('products.category')</label>
                </div>

                <div class="col-md-6 left-category">
                    <div class="panel panel-default" id="panel-categories">
                        <div class="panel-content" id="categorias-content">
                            <ul>

                                @foreach ($categories as $categorie)
                                    <li class="categories Text-Style-2 @if ($loop->first)  @endif"
                                        id='category-{{ $categorie->id }}'
                                        data-id="{{ $categorie->id }}">@lang('categories.'.$categorie->category.'')
                                    </li>
                                @endforeach


                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-md-6 right-category">
                    <div class="panel panel-default panel-right-category" id="panel-categories">
                        <div class="panel-content panel-right-content" id="categorias-content">
                            <ul id="elements-subcategory">
                                @foreach ($categories[0]->categories as $categorie)
                                    <li class="sub-categories Text-Style-2" id='category-{{ $categorie->id }}'
                                        data-id="{{ $categorie->id }}">@lang('categories.'.$categorie->category.'')
                                    </li>
                                @endforeach
                            </ul>
                        </div>
                    </div>
                </div>

                <div class="col-md-12 col-xs-12">
                    <br>
                    <div class="row">
                        <div class="col-md-6" id='panel-comision'>
                            <div class="panel panel-grey">
                                <div class="panel-heading">
                                    @lang('products.title_pub')
                                </div>
                                <div class="panel-content publication-type" id="">
                                    <label for="">
                                        <input type="radio" name="type" value="gold"
                                               @if (isset($article) && $article->type == 'gold') checked @endif> @lang('products.gold')
                                        <span>5%
                                            of the sale</span>
                                    </label>
                                    <label for="">
                                        <input type="radio" name="type" value="silver"
                                               @if (isset($article) && $article->type == 'silver') checked @endif> @lang('products.silver')
                                        <span>2%
                                            of the sale</span>
                                    </label>
                                    <label for="">
                                        <input type="radio" name="type" value="free"
                                               @if ((isset($article) && $article->type == 'free') || !isset($article)) checked @endif> @lang('products.free')
                                        <span></span>
                                    </label>
                                    <a href="{{ url('/terms') }}"><span class="mini_text">You can see all the
                                            details of the commissions here</span></a>
                                    <hr>
                                    <label for=""><input type="checkbox" name="offers" id='offers'
                                                         @if (isset($article) && $article->negotiable == 1) checked
                                                         @endif value="1">
                                        @lang('products.offers') </label>


                                    @if (!isset($article))
                                        <button type="button" id="upload-article" class="btn btn-ebit"
                                                data-loading-text='Cargando <i class="fa fa-spinner fa-spin fa-fw"></i><span class="sr-only">Loading...</span>'
                                                name="button">@lang('products.publish')</button>
                                    @else
                                        @if ($article->status != 'expired' && ($article->stock !=0 || $article->service==true))
                                            <button type="button" id="edit-article" class="btn btn-ebit"
                                                    data-loading-text='Cargando <i class="fa fa-spinner fa-spin fa-fw"></i><span class="sr-only">Loading...</span>'
                                                    name="button">@lang('products.edit')</button>
                                        @endif

                                    @endif

                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
        @include('sections.profile.create_address_modal', ["id" => "address_select"])
    </div>
@endsection

@push('css')
    <link rel="stylesheet" href="{{ url('/css/component.css') }}">

    <style media="screen">
        ul {
            list-style: none;
            margin-bottom: 0px;
        }

        #add-image > span {
            display: block;
        }

        .img-preview {
            margin-top: 10px;
            height: 150px;
            display: none;
        }

        #add-image > i {
            text-align: center;
        }

        #panel-categories {
            padding: 0px;
        }

        #categorias-content {
            padding: 0px;
            background-color: #ecf0f1;
        }

        #categorias-content > ul {
            margin-left: -40px;
        }

        #categorias-content > ul > li {
            padding: 10px;
        }

        #categorias-content > ul > li.active {
            background-color: #f8c82d;
            color: white;
        }

        .right-category {
            padding-left: 0px;
            /*min-height: 300px;*/

        }

        .left-category,
        #panel-comision {
            padding-right: 0px;
            /*min-height:300px;*/
        }

        .panel-right-category {
            border-left: 3px solid black;
            background: white;
        }

        .panel-right-content {
            background: white !important;
        }

        .panel-right-content > ul > li.active {
            background-color: #404148 !important;
            color: white;
        }

        @media (max-width: 768px) {

            .right-category {
                padding-left: 15px;

            }

            .left-category,
            #panel-comision {
                padding-right: 15px;
            }

            .panel-right-category {
                border-left: 0px solid black;
            }
        }

        .kv-file-upload {
            display: none;
        }

        .inputfile {
            width: 0.1px;
            height: 0.1px;
            opacity: 0;
            overflow: hidden;
            position: absolute;
            z-index: -1;
        }

        .delete-img:hover {
            cursor: pointer;
            content: url('https://i.stack.imgur.com/goXU8.png');
        }


    </style>

@endpush
@push('js')

    <script type="text/javascript">

        var categories = [];
        var sub_categories = [];
        var categories_api = {!! json_encode($categories) !!};
        var cat;
        var array_photos = [];
        var urlLogin = '{{ url('/login') }}';
        var urlUser = '{{ url('/account') }}';
        var urlproduct = '{{ url('/articles') }}';
        var categories_lang = {!! json_encode($lang_categories) !!};
        var imageCounter = 1;
        var array_photos_new = [];

        @if(isset($article))
        function deleteImgOld(id) {
            $(`#image-old-${id}`).html("")
        }

        @endif

        function reloadCountImg() {
            array_photos_new = []
            let photos_new = $('input[name="photos[]"]');

            for (let i = 0; i < photos_new.length; i++) {
                let fileReader = new FileReader();
                let fileToLoad = photos_new[i].files[0];

                if (photos_new[i].files[0]) {
                    fileReader.onloadend = function (fileLoadedEvent) {
                        let srcData = fileLoadedEvent.target.result;
                        array_photos_new.push(srcData);
                    }
                    fileReader.readAsDataURL(fileToLoad);
                }
            }
        }

        function deleteImgNew(id) {
            if ($(`#img-${id}`).attr('src')) $(`#container-img-${id}`).remove()
            reloadCountImg()
        }

        @if (isset($article))
        $(document).ready(function () {
            var selectedCategory = '{{ $article->categories[0]->category_id }}';
            var selectedSubCategory = 0;

            let price = '{{$article->price}}'
            let stock = '{{$article->stock}}'
            let is_new = '{{$article->is_new}}'
            let service = '{{$article->service}}'
            let pickup = '{{$article->pickup}}'
            let type = '{{$article->type}}'
            let delivery = '{{$article->delivery}}'
            let user_address_id = '{{$article->user_address_id}}'

            $("#price").val(price)
            $("#stock").val(stock)

            $(`input[name=type][value=${type}]`).prop("checked", true);

            if (service == 1) {
                $("input[name=condition][value=3]").prop("checked", true);
                $('#quantity-container').hide();
                $(".product-info").css('display', 'none');
            } else if (is_new == 1) {
                $("input[name=condition][value=1]").prop("checked", true);
            } else {
                $("input[name=condition][value=2]").prop("checked", true);
            }

            if (pickup == 0) {
                $("#pickup").prop("checked", false);
            }

            if (delivery == 0) { // NO DELIVERY
                $("#delivery").prop("checked", false);
                $("#address_select").addClass("hidden");
            } else { // YES DELIVERY
                $(`#address_user option[value="${user_address_id}"]`).attr('selected', true)
                $("#address_select").removeClass("hidden");
            }

            var countCategory = 0;
            for (var i = 0; i < categories_api.length; i++) {
                for (var k = 0; k < categories_api[i]['categories'].length; k++) {
                    if (categories_api[i]['categories'][k]['id'] == selectedCategory) {
                        countCategory++;
                    }
                }

                if (countCategory != 0) {
                    countCategory = 0;
                    $('#category-' + categories_api[i]['id']).click();
                    $('#category-' + selectedCategory).click();
                }
            }
        });
        @endif
    </script>
    <!-- <script src="{{ url('/components/bootstrap-fileinput/js/plugins/purify.min.js') }}"></script>
          <script src="{{ url('/components/bootstrap-fileinput/js/fileinput.min.js') }}"></script>
          <script src="{{ url('/components/bootstrap-fileinput/js/plugins/piexif.min.js') }}"></script>
          <script src="{{ url('/components/bootstrap-fileinput/js/plugins/sortable.min.js') }}"></script> -->
    <script src="{{ url('/js/jquery.custom-file-input.js') }}" charset="utf-8"></script>
    <script type="text/javascript">
        //onchange
        function sizeCalculate() {
            var total = $("#height").val() * $("#width").val() * $("#weight").val();
            total = total / 166;
            total = total.toFixed(2);
            $("#maxsize").text(total);
        }

        $('.categories').on('click', function () {
            var id = $(this).data('id');
            sub_categories = [];
            if (!$(this).hasClass('active')) {
                $(this).addClass('active');

                if (categories.length == 0) {
                    $(this).addClass('active');
                } else {
                    categories = [];
                    $('.categories').removeClass('active');
                    $(this).addClass('active');
                }

                categories.push(id);
                $('#elements-subcategory').html('');
                var str_html = "";

                for (var i = 0; i < categories_api.length; i++) {

                    if (id == categories_api[i]['id']) {
                        for (var k = 0; k < categories_api[i]['categories'].length; k++) {
                            var categorie_lang = categories_api[i]['categories'][k]['category'];
                            var categorie_lang = categories_lang[categorie_lang];

                            str_html += "<li class='sub-categories Text-Style-2' id='category-" + categories_api[i][
                                    'categories'
                                    ][k]['id'] + "' data-id='" + categories_api[i]['categories'][k]['id'] + "'>" +
                                categorie_lang + "</li>"
                        }
                        $('#elements-subcategory').html(str_html);
                    }
                }
            } else {
                $(this).removeClass('active');

                if (categories.indexOf(id) != -1) {
                    categories.splice(categories.indexOf(id), 1);
                }
            }
            cat = categories;
        });

        $('.address_select_new').on('click', function () {
            $("#modal-app-address_select").removeClass("fade").addClass("show").on('modalSuccess', function () {
                $.ajax({
                    url: '{{ route("account.address.get.ajax") }}',
                    type: 'POST',
                    dataType: 'JSON',
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    success: function (res) {
                        var addresses = res.data.addresses;
                        selectHtml = `<option value="">Select Address</option>`;

                        for (var i = 0; i < addresses.length; i++) {
                            selectHtml += `<option value="` + addresses[i].id + `">` + addresses[i].address + `</option>`;
                        }

                        $("#address_user").html(selectHtml);
                    },
                    error: function (xhr, status, errorThrown) {
                        swal("Oops...", "An unexpected error occurred, please try later.", "error");
                    },
                });
            });
        });

        $(document).on('click', '.sub-categories', function () {
            var id = $(this).data('id');

            if (!$(this).hasClass('active')) {
                if (sub_categories.length == 0) {
                    $(this).addClass('active');
                } else {
                    sub_categories = [];
                    $('.sub-categories').removeClass('active');
                    $(this).addClass('active');
                }

                sub_categories.push(id);
            } else {
                $(this).removeClass('active');

                if (sub_categories.indexOf(id) != -1) {
                    sub_categories.splice(sub_categories.indexOf(id), 1);
                }
            }
        });

        $("#delivery").change(function (event) {
            if (!$('#delivery').is(':checked')) {
                $("#address_select").addClass("hidden");
            } else {
                $("#address_select").removeClass("hidden");
            }

            let condition = $("input[name*='condition']:checked").val();
            if (condition == 3) {
                $('#quantity-container').hide();
                $(".product-info").css('display', 'none');
            }
        });

        $(document).on('click', '#upload-article', function () {
            var token = $('#token').val();
            var formdata = new FormData();
            let pickup = $("input[name='pickup']").val()
            var title = $('#title').val();
            var description = $('#description').val();
            var price = $('#price').val();
            var photos = $('input[name="photos[]"]');
            var status = $("input[name*='condition']:checked").val();
            var count_errors = 0;
            var quantity = $('#stock').val();
            var type_pub = $("input[name*='type']:checked").val();
            var offers = $('#offers').is(":checked");

            for (var i = 0; i < photos.length; i++) {
                var fileReader = new FileReader();
                var fileToLoad = photos[i].files[0];

                if (photos[i].files[0]) {
                    fileReader.onloadend = function (fileLoadedEvent) {
                        var srcData = fileLoadedEvent.target.result;
                        array_photos.push(srcData);
                    }

                    fileReader.readAsDataURL(fileToLoad);
                }
            }

            if (offers == true) {
                offers = 1;
            } else {
                offers = 0;
            }

            var $btn = $(this).button('loading');

            if (sub_categories.length == 0) {
                swal("Ooops!", "You must select a subcategory.", "error");
                count_errors++;
            }

            if (quantity.length == 0) {
                swal("Ooops!", "Quantity cannot be empty.", "error");
                count_errors++;
            }

            if (price.length == 0) {
                swal("Ooops!", "Price cannot be empty.", "error");
                count_errors++;
            }

            if (description.length < 5) {
                swal("Ooops!", "Description cannot be empty.", "error");
                count_errors++;
            }

            if (title.length < 3) {
                swal("Ooops!", "Title cannot be empty.", "error");
                count_errors++;
            }

            if (count_errors != 0) {
                $btn.button('reset')
                return 0;
            }

            var details = [];
            var id_address = null;
            //valid delivery seleted

            if ($('#delivery').is(':checked') == true) {
                if ($('#width').val() == '' || $('#height').val() == '' || $('#weight').val() == '') {
                    swal("Alert", "Please add width, weight and height to use delivery option.", "warning");
                    $btn.button('reset');

                    return false;
                } else if ($("#address_user").val() == "" || $("#address_user").val() == null) {
                    swal("Alert", "You need to select the address to pick up the article.", "warning");
                    $btn.button('reset');

                    return false;
                } else {
                    id_address = $("#address_user").val();
                    //get weight with calculate
                    var weight = $("#height").val() * $("#width").val() * $("#weight").val();
                    weight = weight / 166;
                    weight = weight.toFixed(2);
                    details.push({
                        'key': 'height',
                        'value': $('#height').val()
                    });
                    details.push({
                        'key': 'width',
                        'value': $('#width').val()
                    });
                    details.push({
                        'key': 'large',
                        'value': $('#weight').val()
                    });
                    details.push({
                        'key': 'weight',
                        'value': weight
                    });
                }
            }

            setTimeout(function () {
                var data = {
                    name: title,
                    photos: array_photos,
                    description: description,
                    price: price,
                    categories: sub_categories,
                    is_new: status,
                    stock: quantity,
                    type: type_pub,
                    negotiable: offers,
                    delivery: $('#delivery').is(':checked'),
                    details: details,
                    user_address_id: id_address,
                    pickup: pickup
                };

                if (array_photos.length == 0) {
                    swal("Alert", "You must select a photo.", "warning");
                    count_errors++;
                }

                if (count_errors != 0) {
                    $btn.button('reset')
                    return 0;
                }

                $.ajax({
                    url: '{{ route('articles.store') }}',
                    headers: {
                        'X-CSRF-TOKEN': token
                    },
                    type: 'POST',
                    dataType: 'JSON',
                    data: {
                        data: data
                    },
                    success: function (res) {
                        $btn.button('reset');

                        if (res['error'] == 1) {
                            if (res['code'] == 401) {
                                swal("Ooops!", res['message'], "error");
                                window.location.replace('{{ route('login') }}')
                            } else if (res['code'] == 400) {
                                swal("Ooops!", res['message'], "error");
                            } else if (res['code'] == 422) {
                                if (typeof res['message'] !== "undefined" && res['message'] == 'insufficient_balance') {
                                    swal({
                                            title: "Error",
                                            text: 'Insufficient balance, do you want to buy ebits?',
                                            type: "error",
                                            showCancelButton: true,
                                            closeOnConfirm: false,
                                            showLoaderOnConfirm: false,
                                        },
                                        function () {
                                            window.location.replace('{{ route('ebits.index') }}')
                                        });
                                    return 0;
                                } else {
                                    swal(res['message'], "error");
                                }
                            } else {
                                swal("Oops...", "An unexpected error occurred, please try later.", "error");
                            }
                        } else if (res['success'] == 1) {
                            swal("The article has been published correctly.", {
                                icon: "success",
                                buttons: {
                                    catch: {
                                        text: "Continue",
                                        value: "ok",
                                    }
                                },
                            }).then((value) => {
                                switch (value) {
                                    case "ok":
                                        window.location.replace(urlUser);
                                        break;
                                    default:
                                        window.location.replace(urlUser);
                                }
                            });
                        }
                    },
                    error: function (xhr, status, errorThrown) {
                        $btn.button('reset')
                        swal("Oops...", "An unexpected error occurred, please try later.", "error");
                    },
                });
            }, 3000);
        });

        @if (isset($article))
        $(document).on('click', '#edit-article', function () {
            var $btn = $(this).button('loading');
            var token = $('#token').val();
            let pickup = $("input[name='pickup']:checked").val() ? true : false
            let delivery = $("input[name='delivery']:checked").val() ? true : false
            var title = $('#title').val();
            var description = $('#description').val();
            var price = $('#price').val();

            var status = $("input[name*='condition']:checked").val();
            var count_errors = 0;
            var quantity = $('#stock').val();
            var type_pub = $("input[name*='type']:checked").val();
            var offers = $('#offers').is(":checked");


            if (offers == true) {
                offers = 1;
            } else {
                offers = 0;
            }

            var $btn = $(this).button('loading');
            if (categories.length == 0) {
                swal("Ooops!", "You must select a category.", "error");
                count_errors++;
            }

            if (sub_categories.length == 0) {
                swal("Ooops!", "You must select a subcategory.", "error");
                count_errors++;
            }

            if (count_errors != 0) {
                $btn.button('reset')
                return 0;
            }

            var details = [];
            var id_address = null;

            if (count_errors != 0) {
                $btn.button('reset')
                return 0;
            }

            if ($('#delivery').is(':checked') == true) {
                if ($('#width').val() == '' || $('#height').val() == '' || $('#weight').val() == '') {
                    swal("Alert", "Please add width, weight and height to use delivery option.", "warning");
                    $btn.button('reset');
                    return false;
                } else if ($("#address_user").val() == "" || $("#address_user").val() == null) {
                    swal("Alert", "You need to select the address to pick up the article.", "warning");
                    $btn.button('reset');
                    return false;
                } else {
                    id_address = $("#address_user").val();
                    //get weight with calculate
                    var weight = $("#height").val() * $("#width").val() * $("#weight").val();
                    weight = weight / 166;
                    weight = weight.toFixed(2);
                    details.push({
                        'key': 'height',
                        'value': $('#height').val()
                    });
                    details.push({
                        'key': 'width',
                        'value': $('#width').val()
                    });
                    details.push({
                        'key': 'large',
                        'value': $('#weight').val()
                    });
                    details.push({
                        'key': 'weight',
                        'value': weight
                    });
                }
            }

            setTimeout(function () {
                let array_photos_old = [];
                let photos_old = $('input[name="photos_old[]"]');

                for (let i = 0; i < photos_old.length; i++) {
                    array_photos_old.push(photos_old[i].value);
                }

                var data = {
                    name: title,
                    photos: array_photos_new,
                    photos_old: array_photos_old,
                    description: description,
                    price: price,
                    categories: sub_categories,
                    is_new: status,
                    stock: quantity,
                    type: type_pub,
                    negotiable: offers,
                    delivery: $('#delivery').is(':checked'),
                    details: details,
                    user_address_id: id_address,
                    pickup: pickup,
                    _method: 'PATCH'
                };
                let countPhotos = $("input[name='photos[]']").length;
                let countOldPhotos = $("input[name='photos_old[]']").length;

                if (countPhotos == 0 && countOldPhotos == 0) {
                    swal("Alert", "You must select a photo.", "warning");
                    count_errors++;
                }

                console.log(array_photos_new)
                $.ajax({
                    url: '{{ route('articles.update', $article->id) }}',
                    headers: {'X-CSRF-TOKEN': token},
                    type: 'POST',
                    dataType: 'JSON',
                    data: {data: data, '_method': 'PUT'},
                    success: function (res) {
                        $btn.button('reset')

                        if (res['error'] == 1) {
                            if (res['code'] == 401) {
                                swal("Ooops!", res['message'], "error");
                                window.location.replace('{{ route('login') }}')
                            } else if (res['code'] == 400) {
                                swal("Ooops!", res['message'], "error");
                            } else if (res['code'] == 422) {
                                if (typeof res['message'] !== "undefined" && res['message'] == 'insufficient_balance') {
                                    swal({
                                            title: "Error",
                                            text: 'Insufficient balance, do you want to buy ebits?',
                                            type: "error",
                                            showCancelButton: true,
                                            closeOnConfirm: false,
                                            showLoaderOnConfirm: false,
                                        },
                                        function () {
                                            window.location.replace('{{ route('ebits.index') }}')
                                        });
                                    return 0;
                                } else {
                                    swal(res['message'], "error");
                                }
                            } else {
                                swal("Oops...", "An unexpected error occurred, please try later.", "error");
                            }
                        } else if (res['success'] == 1) {
                            swal({
                                title: "Congratulations",
                                text: "The article has been edited correctly.",
                                type: "success",
                            }).then((value) => {
                                window.location.replace(urlUser);
                            });

                        }
                    },
                    error: function (xhr, status, errorThrown) {
                        $btn.button('reset')
                        swal({
                            title: "Oops...",
                            text: "An unexpected error occurred, please try later.",
                            type: "warn",
                        })

                    },
                });


            }, 2000);
        });
        @endif

        $(document).on('click', 'input[name=condition]', function () {
            var value = $(this).val();
            if (value == 3) {
                $('#quantity-container').hide();
                $('.product-info').hide()
            } else {
                $('#quantity-container').show();
                $('.product-info').show();
            }
        });

        $(document).on('click', '#add-image', function () {
            var container = '#inputs-image';
            var str_html = `<div class='col-md-4'  id="container-img-${imageCounter}"   onclick="deleteImgNew(${imageCounter})" >`;
            str_html += '<input  onchange="deleteImgNew()"  type="file" name="photos[]" id="file-' + imageCounter +
                '" class="inputfile inputfile-4" data-multiple-caption="{count} files selected" accept="image/x-png,image/jpeg,image/jpg"/>';
            str_html += '<label for="file-' + imageCounter +
                '"><figure><svg xmlns="http://www.w3.org/2000/svg" width="20" height="17" viewBox="0 0 20 17"><path d="M10 0l-5.2 4.9h3.3v5.1h3.8v-5.1h3.3l-5.2-4.9zm9.3 11.5l-3.2-2.1h-2l3.4 2.6h-3.5c-.1 0-.2.1-.2.1l-.8 2.3h-6l-.8-2.2c-.1-.1-.1-.2-.2-.2h-3.6l3.4-2.6h-2l-3.2 2.1c-.4.3-.7 1-.6 1.5l.6 3.1c.1.5.7.9 1.2.9h16.3c.6 0 1.1-.4 1.3-.9l.6-3.1c.1-.5-.2-1.2-.7-1.5z"/></svg></figure> <span>Choose a file&hellip;</span></label>';
            str_html += `<img id="img-${imageCounter}" src=""  title="Deleted img" class="img-responsive img-preview center-block delete-img" alt="">`;
            str_html += '</div>';

            $(container).append(str_html);
            imageCounter++;

            $('.inputfile').each(function () {
                var $input = $(this),
                    $label = $input.next('label'),
                    labelVal = $label.html(),
                    $figure = $input.next('figure'),
                    $img = $label.next('img');

                $input.on('change', function (e) {
                    var fileName = '';

                    if (this.files && this.files.length > 1) {
                        fileName = (this.getAttribute('data-multiple-caption') || '').replace(
                            '{count}', this.files.length);
                    } else if (e.target.value) {
                        fileName = e.target.value.split('\\').pop();
                        var reader = new FileReader();

                        var extn = (e.target.value).substring((e.target.value).lastIndexOf('.') + 1)
                            .toLowerCase();
                        if (extn == "png" || extn == "jpg" || extn == "jpeg") {
                            reader.onload = function (w) {

                                $($img).attr('src', w.target.result);
                                $($img).show();
                            }

                            reader.readAsDataURL(e.target.files[0]);
                            $($label).hide();
                        } else {
                            swal("Ooops!", "Select only image on png, jpg o jpeg format.", "error");
                        }
                    }
                });
                $input.on('focus', function () {
                    $input.addClass('has-focus');
                }).on('blur', function () {
                    $input.removeClass('has-focus');
                });
            });
        });
    </script>
@endpush