@extends('adminlte::page')

@section('title', 'Freecia')

@section('content_header')
    <h1>{{ $module_name }} - {{ ucfirst($mode) }}</h1>
@stop


@section('content')
    <div class="box">

        <div class="box-body">
            <form method="POST" id="order-form" action="{{ $action_url }}"
                  @if($mode != 'edit')  @endif enctype="multipart/form-data">
                {{ csrf_field() }}

                <div class="row form-group">
                    <div class="col-md-2">
                        <label>Order Status</label>
                        <select required class="form-control select2-multiple" style="font-size: 16px;" name="status_id" id="status_id" style="width: 100%">
                            @foreach($orderStatuses as $orderStatus)
                                <option @if($order->status->id == $orderStatus->id) selected @endif value="{{$orderStatus->id}}" >{{$orderStatus->status}}</option>
                            @endforeach
                        </select>
                    </div>
                </div>

                <div class="edit-product-list-placeholder">
                    @include('admin.retailerorders.partials.edit-product-list')
                </div>

                <div class="order-more-products-placeholder"></div>

                <div class="row form-group">
                    <div class="col-md-12" align="right">
                        <input type="button" class="btn btn-primary add-more-option" value="Add More">
                    </div>
                </div>

                <div class="row form-group">
                    <div class="col-md-12">
                        <input type="submit" value="Submit" class="btn btn-primary">
                        <a href="{{ route('retailer.list') }}" class="btn btn-default">Cancel</a>
                    </div>
                </div>

            </form>
        </div>
    </div>


    <div class="modal  fade" id="order-edit-modal">
        <div class="modal-dialog modal-lg">
            <div class="modal-content">
                <div class="modal-header">
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span></button>
                    <h4 class="modal-title">Add Product</h4>
                </div>
                <div class="modal-body" id="order-edit-placeholder">

                </div>
                <div class="modal-footer">
                    <input type="button" class="btn btn-primary save-product" value="Save">
                    <button type="button" class="btn btn-default pull-right" data-dismiss="modal">Cancel</button>
                </div>
            </div>
            <!-- /.modal-content -->
        </div>
        <!-- /.modal-dialog -->
    </div>


@stop

@section('javascript')
    <script>
        $(function () {
            $('.select2').select2({width: '100%', allowClear: true});

            $('.select2-multiple').select2({width: "100%"});


            $('.input-checkbox').iCheck({
                checkboxClass: 'icheckbox_square-blue',
                radioClass: 'iradio_square-blue',
                increaseArea: '20%' // optional
            });

            $('.select2-single').select2({
                width: '100%',
                allowClear: true
            });

            $("body").on("click", ".btn-danger", function () {
                $(this).parents(".control-group").remove();
            });


            //updatePriceWithQtyInTable

            $('.quantity').on('keyup change',function(){
                var tot = $(this).parent().prev().html() * this.value;
                $(this).parent().next().find('.total').val(tot);
            });

            validateForms();

            $(document).off('click', '.select-product').on('click', '.select-product', function () {

                var row = $(this).parent().parent().parent().parent();
                row.remove();
                $(this).parents('.row').remove();

            });

            $(document).off('click', '.add-more-option').on('click', '.add-more-option', function () {

                $.ajax({
                    type: 'GET',
                    url: '{{ route('retailer.list.product') }}',
                    success: function (response) {
                        $('#order-edit-placeholder').html(response.productList);
                        $("#order-edit-modal").modal('show');
                        $('.select2-multiple').select2({width: "100%"});
                        $('.input-checkbox').iCheck({
                            checkboxClass: 'icheckbox_square-blue',
                            radioClass: 'iradio_square-blue',
                            increaseArea: '20%' // optional
                        });
                        $('.select2-single').select2({
                            width: '100%',
                            allowClear: true
                        });
                    }
                });
            })

            $(document).off('click', '.save-product').on('click', '.save-product', function (event) {
                event.preventDefault();

                var row = $(this).parent().parent().parent().parent();
                var productId = row.find('select[name="product_id"]').val();
                var brandId = row.find('select[name="brand_id"]').val();
                var productSizeId = row.find('select[name="product_size_id"]').val();
                var categoryId = row.find('select[name="category_id"]').val()
                var price = row.find('input[name="price"]').val();
                var quantity = row.find('input[name="quantity[]"]').val();
                var orderId = "{{ $order->id }}";
                var error = '';


                if (($.trim(brandId)).length == 0) {
                    error += '<li>Brand is required</li>';
                }

                if (($.trim(categoryId)).length == 0) {
                    error += '<li>Category is required</li>';
                }

                if (($.trim(productId)).length == 0) {
                    error += '<li>Product is required</li>';
                }


                // TODO :
                // also add condition for the products without variations
                if (($.trim(productSizeId)).length == 0 && $("#product_size_container").attr('data-variations') == true) {
                    error += '<li>Product variation is required</li>';
                }


                if (error.length > 0) {
                    toastr.error('<ul>' + error + '</ul>', '', {
                        timeOut: 3000,
                        'positionClass': 'toast-bottom-right'
                    });
                    return false;
                }

                var url = '{{ route('retailer.product.save') }}';

                var productData = {
                    _token: '{{ csrf_token() }}',
                    product_id: productId,
                    brand_id: brandId,
                    category_id: categoryId,
                    price: price,
                    quantity: quantity,
                    product_size_id : productSizeId,
                    order_id: orderId,
                };

                $.ajax({
                    type: 'POST',
                    data: productData,
                    url: url,
                    success: function (response){
                        if (!response.error){
                            var orderItems = response.orderItemProduct;
                            $('.edit-product-list-placeholder').html(orderItems);
                        }
                       $("#order-edit-modal").modal('hide');

                        $('.quantity').on('keyup change',function(){
                            var tot = $(this).parent().prev().html() * this.value;
                            $(this).parent().next().find('.total').val(tot);
                        });
                    }
                });
            });




            $(document).on('change', '#brand_id', function () {
                var brand = $(this);
                var brandId = $(this).val();
                $('.pace-activity').show()

                $.ajax({
                    type: 'GET',
                    data: {brand_id: brandId},
                    url: '{{ route('order.get.category') }}',
                    success: function (response) {
                        var html = '<option value="">Choose Category</option>';

                        for (var i = 0; i < response.categories.length; i++) {
                            html += '<option value="' + response.categories[i].id + '" >' + response.categories[i].name + '</option>';
                        }
                        brand.parent().parent().find('select#category_id').html(html).change();

                        $('.pace-activity').hide();
                    }
                });
            })

            $(document).on('change', '#category_id', function () {

                var category = $(this);
                var categoryId = $(this).val();
                $('.pace-activity').show()

                $.ajax({
                    type: 'GET',
                    data: {category_id: categoryId},
                    url: '{{ route('order.get.product') }}',
                    success: function (response) {
                        var html = '<option value="">Choose Product</option>';

                        for (var i = 0; i < response.products.length; i++) {
                            html += '<option value="' + response.products[i].id + '" >' + response.products[i].name + '</option>';
                        }
                        category.parent().parent().find('select#product_id').html(html).change();
                        $('.pace-activity').hide();
                    }
                });
            })

            $(document).on('change', '#product_id', function(){
                var product = $(this);
                var productId = $(this).val();
                var totalPrice = 0;

                $('.pace-activity').show()

                $.ajax({
                    type: 'GET',
                    data: {product_id: productId},
                    url: '{{ route('retailer.product.price') }}',
                    success: function(response){

                        // Check if product has any variation.
                        // Yes) Ask them to choose a variation
                            // Get the price for that variation
                        // No) Proceed as before

                        if(response.product && response.product.product_sizes && response.product.product_sizes.length > 0){
                            $("#product_size_container").show();
                            var product_size = $("#product_size_id");

                            var html = '<option value="">Choose Product</option>';

                            for (var i = 0; i < response.product.product_sizes.length; i++) {
                                html += '<option value="' + response.product.product_sizes[i].id + '" data-price='+ response.product.product_sizes[i].retailer_price +' >' + response.product.product_sizes[i].size.name + '</option>';
                            }

                            product_size.parent().parent().find('select#product_size_id').html(html).change();

                            $('.pace-activity').hide();

                            // Set attibute on the container about the product variations (boolean)
                            $("#product_size_container").attr('data-variations', true);

                        }

                        if (response.product){
                            product.parent().parent().find('input.price').val(response.product.retailer_price);
                        }else{
                            product.parent().parent().find('input.price').val(0);
                        }

                        $('.quantity').on('keyup change',function(){
                            var tot = $(this).parent().prev().html() * this.value;
                            $(this).parent().next().find('.total').val(tot);
                        });

                        $('.pace-activity').hide();

                    }
                })

            })

            $(document).on('change', '#product_size_id', function () {
                var product_size = $(this);
                var product = $("#product_id");
                var product_variation_price = $("#product_size_id option:selected").attr("data-price");

                if (product_variation_price * 1 > 0){
                    product.parent().parent().find('input.price').val(product_variation_price);
                }else{
                    product.parent().parent().find('input.price').val(0);
                }

                $('.quantity').on('keyup change',function(){
                    var tot = $(this).parent().prev().html() * this.value;
                    $(this).parent().next().find('.total').val(tot);
                });

                $('.pace-activity').hide();
            })

            function initIcheck() {
                $('.radio-icheck').iCheck({
                    checkboxClass: 'icheckbox_square-blue',
                    radioClass: 'iradio_square-blue',
                    increaseArea: '20%' // optional
                });
            }


            function validateForms() {
                $('#order-form').validate({
                    submitHandler: function (form) {
                        var error = false;
                        if (error == true) {
                            return false;
                        }

                        form.submit();

                    },

                    highlight: function (element, errorClass, validClass) {

                        $(element).parents('.form-control').removeClass('has-success').addClass('has-error');
                    },
                    unhighlight: function (element, errorClass, validClass) {
                        $(element).parents('.form-control').removeClass('has-error').addClass('has-success');
                    },
                    errorPlacement: function (error, element) {

                        if ((element[0] instanceof HTMLSelectElement) && element.hasClass('select2-hidden-accessible')) {
                            error.insertAfter(element.next('.select2-container'));
                        } else if (element.parent('dev.col-md-6').length) {
                            error.insertAfter(element.parent());
                        } else if (element.prop('type') === 'radio' && element.parent('.radio-inline').length) {
                            error.insertAfter(element.parent().parent());
                        } else if (element.prop('type') === 'checkbox' || element.prop('type') === 'radio') {
                            error.appendTo(element.parent().parent());
                        } else {
                            error.insertAfter(element);
                        }
                    }
                })
            }

        });


    </script>
@stop