@extends('admin.layout')
@section('content')
    <!-- Content Header (Page header) -->
    <div class="content-header">
        <div class="d-flex align-items-center">
            <div class="mr-auto">
                <h3 class="page-title"> {{ translate('Add 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' => 'post', 'action' => 'Admin\OrderController@storeDigital', '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, null, ['required' => 'required', 'style' => 'width:100%', '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', null, ['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', null, ['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', null, ['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', null, ['class' => 'form-control', 'placeholder' => translate('Phone')]) !!}
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group">
                                <div class="checkbox">
                                    {!! Form::checkbox('gift_product', null, 0, ['id' => 'Checkbox_1']) !!}
                                    <label for="Checkbox_1">{{ translate('Send as Gift') }}</label>
                                </div>
                            </div>
                        </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="getProductOrderEditDigital(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('Total rice') }}</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('Total rice') }}</th>
                                        </tr>
                                    </thead>
                                    <tbody class="selected_products_with_total">

                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="col-md-6">
                            <div class="row">
                                <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="0">{{ translate('UnPaid') }}</option>
                                        <option value="1">{{ translate('Paid') }}</option>
                                    </select>
                                </div>
                            </div>
                            <div class="row">

                                <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>
                                        @if (\App\Addon::where('type', 'Paypal_active')->first()->value == 1)
                                            <option value="paypal">{{ translate('Paypal') }}</option>
                                        @endif
                                    </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', null, ['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 == 2) {
                    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') }}');

        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,
                        user_id: $('#user_id').val(),
                    },
                    success: function(data) {
                        showAjaxsToast(data.message)
                        getCartProductsDigital()
                        getCartDetailsDigital()
                        cartProductsSum()
                    }
                });
            }

        }
        $('.select2').select2();
        $('#user_id').prepend($('<option>', {
            value: 0,
            text: `{{ translate('Choose Client') }}`,
            disabled: true,
            selected: true
        }));
        $('#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);
                }
            });
        })
        getCartProductsDigital()
        getCartDetailsDigital()
        cartProductsSum()

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

        }

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

        function removeProductFromOrderDigital(id) {
            var url = "{{ route('Product.removeProductFromOrderDigital') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    id: id,
                    user_id: $('#user_id').val(),
                },
                success: function(data) {
                    $('#cart_products').html(data);
                    $('.options').html('');
                    $('.quantity').html('');
                    $('#product_id').val(0).change();
                    getCartDetailsDigital()
                    cartProductsSum()
                }
            });
        }

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

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

        }

        function getCartDetailsDigital() {
            var url = "{{ route('Product.cartSumaryDigital') }}"
            $.ajax({
                type: "POST",
                url: url,
                data: {
                    _token: '{{ csrf_token() }}',
                    user_id: $('#user_id').val(),
                },
                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() }}',
                    user_id: $('#user_id').val(),
                },
                success: function(data) {
                    products_counter = data;
                }
            });
        }

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