@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Edit order') }}</h3>
                <div class="d-inline-block align-items-center">
                    <nav>
                        <ol class="breadcrumb">
                            <li class="breadcrumb-item"><a href="{{ route('dashboard') }}"><i
                                        class="mdi mdi-home-outline"></i></a></li>
                            <li class="breadcrumb-item" aria-current="page"> {{ translate('Edit order') }}</li>

                        </ol>
                    </nav>
                </div>
            </div>

        </div>
    </div>
    <!-- Main content -->
    <section class="content">

        <div class="box">
            <div class="box-header">

            </div>
            <div class="box-body wizard-content">
                {!! Form::open(['method' => 'patch', 'action' => ['Admin\OrderController@update', $order->id], 'files' => true, 'class' => 'validation-wizard-add wizard-circle']) !!}
                <h6>{{ translate('Client Information') }}</h6>
                <section>
                    <div class="row">
                        <div class="col-md-3">
                            <div class="form-group">
                                <label for="name">{{ translate('Client') }}
                                </label>
                                <div>
                                    {!! Form::select('user_id', $clients, $order->user_id, ['id' => 'user_id', 'class' => 'form-control select2', 'data-placeholder' => translate('Client')]) !!}

                                </div>
                            </div>
                        </div>
                        <div class="col-md-9">
                            <div class="row">
                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="firstname">{{ translate('First Name') }}
                                        </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                        <div>
                                            {!! Form::text('firstname', $order->firstname, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Title')]) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="lastname">{{ translate('Last Name') }}
                                        </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                        <div>
                                            {!! Form::text('lastname', $order->lastname, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Last Name')]) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="row">
                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="email">{{ translate('Email') }}
                                        </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                        <div>
                                            {!! Form::text('email', $order->email, ['required' => 'required', 'class' => 'form-control', 'placeholder' => translate('Email')]) !!}
                                        </div>
                                    </div>
                                </div>
                                <div class="col-md">
                                    <div class="form-group">
                                        <label for="telephone">{{ translate('Phone') }}
                                        </label>
                                        <div>
                                            {!! Form::text('telephone', $order->telephone, ['class' => 'form-control', 'placeholder' => translate('Phone')]) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    {!! Form::checkbox('gift_product', null, $order->gift_product, ['id' => 'Checkbox_1']) !!}
                                    <label for="Checkbox_1">{{ translate('Send as Gift') }}</label>
                                </div>
                            </div>
                        </div>
                    </div>
                </section>
                <h6>{{ translate('Address Information') }}</h6>
                <section>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="form-group">
                                <label for="name">{{ translate('Address') }}
                                </label><i style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                <div>
                                    {!! Form::select('address_id', $addresses, $order->address_id, ['required' => 'required', 'id' => 'address_id', 'style' => 'width:100%', 'class' => 'form-control select2', 'data-placeholder' => translate('Address')]) !!}

                                </div>
                            </div>
                        </div>
                        <input type="hidden" bring-it-by="add_product_to_order_class" value="{{ $order->id }}"
                            name="order_id">
                        <div class="col-md-8 address_data_container">

                        </div>
                    </div>
                </section>
                <h6>{{ translate('Choose product') }}</h6>
                <section>
                    <div class="row">
                        <div class="col-md-4">
                            <div class="box-header">
                                {{ translate('Add product') }}
                            </div>
                            <br>
                            <div class="form-group">
                                <label for="name">{{ translate('Products') }}
                                </label>
                                <div>

                                    <select style="width:100%" class="form-control select2 add_product_to_order_class"
                                        name="product_id" id="product_id" onchange="getProductOrderEdit(this)">
                                        <option value="0" disabled selected>
                                            {{ translate('Select Product to add to order.') }}</option>
                                        @foreach ($products as $key => $product)
                                            <option value="{{ $key }}">{{ $product }}</option>
                                        @endforeach
                                    </select>

                                </div>
                            </div>
                            <div class="options">

                            </div>
                            <div class="quantity">

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

                            <div class="table-responsive">
                                <table id="complex_header" class="table table-lg table-separated" style="width:100%">
                                    <thead>
                                        <tr class="bg-dark">
                                            <th class="text-center">{{ translate('Title') }}</th>
                                            <th class="text-center">{{ translate('photo') }}</th>
                                            <th class="text-center">{{ translate('price') }}</th>
                                            <th class="text-center">{{ translate('Quantity') }}</th>
                                            <th class="text-center">{{ translate('Trice') }}</th>
                                            <th class="text-center">{{ translate('variation') }}</th>
                                            <th class="text-center">{{ translate('Options') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody id="cart_products">

                                    </tbody>
                                </table>

                            </div>

                        </div>
                    </div>
                </section>
                <h6>{{ translate('Order confirmation data') }}</h6>
                <section>
                    <div class="row">
                        <div class="col-md-6">
                            <div class="table-responsive">
                                <table id="complex_header" class="table table-lg table-separated" style="width:100%">
                                    <thead>
                                        <tr class="bg-dark">
                                            <th class="text-center">{{ translate('Title') }}</th>
                                            <th class="text-center">{{ translate('price') }}</th>
                                            <th class="text-center">{{ translate('Quantity') }}</th>
                                            <th class="text-center">{{ translate('Trice') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="selected_products_with_total">

                                    </tbody>
                                </table>

                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                @php
                                    $delivery_status = $order->delivery_status;
                                    $payment_status = $order->payment_status;
                                @endphp
                                <div class="col-md">
                                    <label for="update_payment_status">{{ translate('Payment Status') }}</label><i
                                        style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                    <select class="form-control" name="payment_status" required>
                                        <option value="1" @if ($payment_status == 1) selected @endif>{{ translate('Paid') }}</option>
                                        <option value="0" @if ($payment_status == 0) selected @endif>{{ translate('UnPaid') }}</option>
                                    </select>
                                </div>
                                <div class="col-md">
                                    <label for="update_delivery_status">{{ translate('Delivery status') }}</label><i
                                        style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                    <select class="form-control" name="delivery_status" required>
                                        <option value="pending" @if ($delivery_status == 'pending') selected @endif>{{ translate('pending') }}
                                        </option>
                                        <option value="on_review" @if ($delivery_status == 'on_review') selected @endif>{{ translate('On review') }}
                                        </option>
                                        <option value="ready_to_delever" @if ($delivery_status == 'ready_to_delever') selected @endif>
                                            {{ translate('Ready to delever') }}</option>
                                        <option value="on_delivery" @if ($delivery_status == 'on_delivery') selected @endif>
                                            {{ translate('On delivery') }}</option>
                                        <option value="delivered" @if ($delivery_status == 'delivered') selected @endif>{{ translate('Delivered') }}
                                        </option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">
                                @php
                                    $delivery_status = $order->payment_type;
                                    $payment_status = $order->payment_status;
                                @endphp
                                <div class="col-md-6">
                                    <label for="ssssss">{{ translate('Payment Status') }}</label><i
                                        style="color: crimson;font-size:.5em;" class="fa fa-asterisk"></i>
                                    <select class="form-control" name="payment_type" required>
                                        <option value="cash" @if ($payment_status == 'cash') selected @endif>{{ translate('Cash') }}</option>
                                    </select>
                                </div>
                                <div class="col-md-6">
                                    <div class="row">
                                        <div class="col-md-9">
                                            <div class="form-group">
                                                <label for="coupon_id">{{ translate('Coupon') }}
                                                </label>
                                                <div>
                                                    {!! Form::text('coupon_id', null, ['id' => 'coupon_id', 'class' => 'form-control', 'placeholder' => translate('Coupon')]) !!}
                                                </div>

                                            </div>
                                        </div>
                                        <div class="col-md-3">
                                            <label for="use">
                                            </label>
                                            <input type="button" id="use_coupon" onclick="useCoupon()"
                                                value="{{ translate('Use') }}" class="btn btn-primary form-control">
                                        </div>
                                    </div>

                                </div>

                            </div>
                            <div class="row">
                                <div class="col-md-6">
                                    <div class="form-group">
                                        <label for="notes">{{ translate('Notes') }}
                                        </label>
                                        <div>
                                            {!! Form::textarea('notes', $order->notes, ['class' => 'form-control', 'placeholder' => translate('Notes')]) !!}
                                        </div>

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

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

    </section>
@endsection

@section('script')
    <script src="{{ url('Panel/main-semidark/js/pages/steps.js') }}"></script>
    <script type="text/javascript">
        var products_counter = 0;
        var form = $(".validation-wizard-add").show();

        $(".validation-wizard-add").steps({
            headerTag: "h6",
            bodyTag: "section",
            transitionEffect: "none",
            titleTemplate: '<span class="step">#index#</span> #title#',
            labels: {
                finish: "Submit"
            },
            onStepChanging: function(event, currentIndex, newIndex) {
                if (newIndex == 3) {
                    if (products_counter == 0) {
                        alert('No products');
                        return;
                    }
                }
                return currentIndex > newIndex || !(3 === newIndex && Number($("#age-2").val()) < 18) && (
                    currentIndex < newIndex && (form.find(".body:eq(" + newIndex + ") label.error")
                        .remove(), form.find(".body:eq(" + newIndex + ") .error").removeClass("error")),
                    form
                    .validate().settings.ignore = ":disabled,:hidden", form.valid())
            },
            onFinishing: function(event, currentIndex) {
                return form.validate().settings.ignore = ":disabled", form.valid()
            },
            onFinished: function(event, currentIndex) {
                form.submit();
            }
        }), $(".validation-wizard-add").validate({
            ignore: "input[type=hidden]",
            errorClass: "badge badge-danger text-center ahmed",
            successClass: "text-success",
            highlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            unhighlight: function(element, errorClass) {
                $(element).removeClass(errorClass)
            },
            errorPlacement: function(error, element) {
                error.insertAfter(element)
            },
            rules: {
                email: {
                    email: !0
                }
            }
        })
        $(".wizard .actions ul li a:contains('Next')").text('{{ translate('next') }}');
        $(".wizard .actions ul li a:contains('Previous')").text('{{ translate('prev') }}');
        $(".wizard .actions ul li a:contains('Submit')").text('{{ translate('Save') }}');
        var url = "{{ route('Address.getOrderAdressData') }}"
        $.ajax({
            type: "POST",
            url: url,
            data: {
                _token: '{{ csrf_token() }}',
                id: {{ $order->address->id }}
            },
            success: function(data) {
                $('.address_data_container').html(data);
                $(".select2").select2();
                onChangeRegion()
            }
        });
        $('#address_id').change(function() {
            var url = "{{ route('Address.getOrderAdressData') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: $('#address_id').val()
                },
                success: function(data) {
                    $('.address_data_container').html(data);
                    $(".select2").select2();
                    onChangeRegion()
                }
            });
        });

        function useCoupon() {
            var coupon_code = $('#coupon_id').val();
            if (coupon_code == '') {
                showAjaxsToast("{{ translate('NO coupone') }}")
            } else {
                var url = "{{ route('Product.applycouponToEditOrder') }}"
                $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        _token: '{{ csrf_token() }}',
                        coupon_code: coupon_code,
                        order_id: {{ $order->id }},
                        user_id: {{ $order->user_id }},
                    },
                    success: function(data) {
                        showAjaxsToast(data.message)
                        getCartProducts()
                        getCartDetails()
                        cartProductsSum()
                    }
                });
            }

        }
        $('.select2').select2();
        $('#user_id').change(function() {
            var id = $(this).val();
            var url = "{{ route('getUserById') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(data) {
                    $("input[name=firstname]").val(data.user.f_name);
                    $("input[name=lastname]").val(data.user.l_name);
                    $("input[name=email]").val(data.user.email);
                    $("input[name=telephone]").val(data.user.phone);
                    $('#address_id').html('');
                    $.each(data.addresses, function(i, item) {
                        $('#address_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                }
            });
        })
        getCartProducts()
        getCartDetails()
        cartProductsSum()
        onChangeRegion()

        function addProductToOrder() {
            var selectedProduct = $('input[bring-it-by="add_product_to_order_class"]').serializeArray();
            var url = "{{ route('Product.addProductOrderEdit') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    region_id: $('#region_id').val(),
                    selectedProduct: selectedProduct
                },
                success: function(data) {
                    $('#cart_products').html(data);
                    $('.options').html('');
                    $('.quantity').html('');
                    $('#product_id').val(0).change();
                    getCartDetails()
                    cartProductsSum()
                }
            });

        }

        function checkVariantStoc(quantity) {
            var selectedProductVariant = $('input[bring-it-by="add_product_to_order_class"]').serializeArray();
            console.log(selectedProductVariant);
            var url = "{{ route('Product.checkVariantStoc') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    selectedProductVariant: selectedProductVariant,
                    quantity: quantity
                },
                success: function(data) {
                    $('.quantity').html(data);
                }
            });
        }

        function removeProductFromOrder(id) {
            var url = "{{ route('Product.removeProductFromOrder') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    region_id: $('#region_id').val(),
                    order_id: {{ $order->id }},
                },
                success: function(data) {
                    $('#cart_products').html(data);
                    $('.options').html('');
                    $('.quantity').html('');
                    $('#product_id').val(0).change();
                    getCartDetails()
                    cartProductsSum()
                }
            });
        }

        function editProductFromOrder(id, product_id, options, quantity) {
            var url = "{{ route('Product.getProductOrderEdit') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: product_id,
                    cart_id: id,
                    options: options,
                    quantity: quantity,
                },
                success: function(data) {
                    $('.options').html(data);
                    checkVariantStoc(quantity)
                }
            });
        }

        function getProductOrderEdit(e) {
            if (e.value != 0) {
                var url = "{{ route('Product.getProductOrderEdit') }}"
                $.ajax({
                    type: "POST",
                    url: url,
                    data: {
                        _token: '{{ csrf_token() }}',
                        id: e.value
                    },
                    success: function(data) {
                        $('.options').html(data);
                        checkVariantStoc(1)
                    }
                });
            }

        }

        function getprovices(e) {
            getprovicesAjax(e.value)
        }

        function getcities(e) {
            getcitiesAjax(e.value)
        }

        function getregions(e) {
            getregionsAjax(e.value)
        }

        function onChangeRegion() {
            var region_id = $('#region_id').val();
            var url = "{{ route('Order.UpdateShippingCostOrderEdit') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    region_id: region_id,
                    order_id: {{ $order->id }}
                },
                success: function(data) {
                    getCartProducts()
                    getCartDetails()
                    cartProductsSum()
                }
            });
        }

        function getprovicesAjax(id) {
            var url = "{{ route('Country.getProvinceiesByCountry') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(data) {
                    $('#province_id').html(null);
                    $.each(data, function(i, item) {
                        $('#province_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                    if (data.length != 0) {
                        getcitiesAjax($('#province_id').val())
                    } else {
                        $('#city_id').html(null);
                        $('#region_id').html(null);
                    }
                }
            });
        }

        function getcitiesAjax(id) {
            var url = "{{ route('Country.getCitiesByProvince') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(data) {
                    $('#city_id').html(null);
                    $.each(data, function(i, item) {
                        $('#city_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });
                    if (data.length != 0) {
                        getregionsAjax($('#city_id').val())
                    } else {
                        $('#region_id').html(null);
                    }
                }
            });
        }

        function getregionsAjax(id) {
            var url = "{{ route('Country.getRegionByCity') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id
                },
                success: function(data) {
                    $('#region_id').html(null);
                    $.each(data, function(i, item) {
                        $('#region_id').append($('<option>', {
                            value: i,
                            text: item
                        }));
                    });

                    onChangeRegion()
                }
            });
        }

        function getCartDetails() {
            var url = "{{ route('Product.cartSumary') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    order_id: {{ $order->id }},
                },
                success: function(data) {
                    $('.selected_products_with_total').html(data);
                }
            });
        }

        function cartProductsSum() {
            var url = "{{ route('Product.cartProductsSum') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    order_id: {{ $order->id }},
                },
                success: function(data) {
                    products_counter = data;
                }
            });
        }

        function getCartProducts() {
            var url = "{{ route('Product.getCartProducts') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    order_id: {{ $order->id }},
                },
                success: function(data) {
                    $('#cart_products').html(data);
                }
            });
        }
    </script>
@endsection