@extends('layouts.app')
@section('extrastyles')
    <link href="{{ asset('/plugins/dataTables/datatables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('/plugins/select2/select2.css') }}" rel="stylesheet">
    <style>
        .auto-price-brand-products {
            list-style: none;
        }
    </style>
@endsection
@section('content')
    <div class="wrapper wrapper-content animated fadeIn">
        <div class="row">
            <div class="col-sm-12">
                <div class="ibox float-e-margins">
                    <div class="ibox-title2">
                        <h5>Pricing</h5>
                    </div>
                    <div class="ibox-content p-md product-pricing-list">
                        @include('flash::message')
                        <div class="clearfix"></div>
                        <div class="tabs-container">
                            <ul class="nav nav-tabs" role="tablist">
                                <li>
                                    <a class="nav-link active" href="#tab-auto-price" role="tab" data-title="auto-price" data-toggle="tab">
                                        <span class="nav-link-in"> Auto Price </span>
                                    </a>
                                </li>
                                <li>
                                    <a class="nav-link" href="#tab-price-multiplier" role="tab" data-title="price-multiplier" data-toggle="tab">
                                        <span class="nav-link-in"> Price Multiplier </span>
                                    </a>
                                </li>
                                <li>
                                    <a class="nav-link" href="#tab-retail-price" role="tab" data-title="retail-price" data-toggle="tab">
                                        <span class="nav-link-in"> Retail Product Prices </span>
                                    </a>
                                </li>
                                <li>
                                    <a class="nav-link" href="#tab-manual-price" role="tab" data-title="manual-price" data-toggle="tab">
                                        <span class="nav-link-in"> Manual Pricing </span>
                                    </a>
                                </li>
                                <li>
                                    <a class="nav-link" id="discountLink" href="#tab-discount" role="tab" data-title="manual-price" data-toggle="tab">
                                        <span class="nav-link-in"> Discount </span>
                                    </a>
                                </li>
                            </ul>
                            <div class="tab-content">
                                <div id="tab-retail-price" class="tab-pane" role="tabpanel">
                                    <div class="panel-body">
                                        @include('Product::pricing.tabs.retail-price')
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div id="tab-manual-price" class="tab-pane" role="tabpanel">
                                    <div class="panel-body">
                                        @include('Product::pricing.tabs.manual-price')
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div id="tab-auto-price" class="tab-pane active" role="tabpanel">
                                    <div class="panel-body active">
                                        @include('Product::pricing.tabs.auto-price')
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div id="tab-price-multiplier" class="tab-pane" role="tabpanel">
                                    <div class="panel-body">
                                        @include('Product::pricing.tabs.price-multiplier')
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                                <div id="tab-discount" class="tab-pane" role="tabpanel">
                                    <div class="panel-body">
                                        @include('Product::pricing.tabs.discount')
                                        <div class="clearfix"></div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endsection
@section('footer')
    <script src="{{ asset('/plugins/dataTables/datatables.min.js') }}"></script>
    <script src="https://cdn.jsdelivr.net/gh/xcash/bootstrap-autocomplete@v2.3.7/dist/latest/bootstrap-autocomplete.min.js"></script>
    <script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script>
        const roleTiers = {!! json_encode($roles->map(function($item) {
            return [
                'id' => $item->id,
                'tiers' => $item->tier->pluck('tier_id')->join(',')
            ];
        })->pluck('tiers', 'id')->toArray()) !!};
    </script>
    <script>
        let retailPriceTable = null;
        let manualPriceProductsTable = null;
        $(document).ready(function() {

            var hashString = document.location.hash;
            if(hashString == '#discount') {
                $('#discountLink').click();
            }

            retailPriceTable =  $('#product_tier_price_listing').dataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ ecommerce_url('retail-price/records') }}",
                    data: function (data) {
                        data.brand_id = $('#product_brand_select').children("option:selected").val();
                        data.category_id = $('#product_category_select').children("option:selected").val();
                    }
                },
            });
            manualPriceProductsTable = $('#manual_price_products_listing').dataTable({
                responsive: true,
                processing: true,
                serverSide: true,
                dom: 'lftip',
                language: {
                    lengthMenu: " _MENU_ ",
                    searchPlaceholder: "Search...",
                    search: '', /* removed search label */
                },
                ajax : {
                    url: "{{ ecommerce_url('manual-price/records') }}",
                    data: function (data) {
                    }
                },
            });

            removeAutoPriceEntry();

            $('#update_price').click(function () {
                var table = $(this).closest('.table');
                var msrp  = table.find('#msrp').val();
                var price = table.find('#price').val();
                var salePrice = table.find('#sale_price').val();
                var priceEnding = table.find('#price_ending').val();
                var productPrice = $('#example-price span:first').attr('data-original-price');

                msrp = parseFloat(msrp);
                price = parseFloat(price);
                salePrice = parseFloat(salePrice);
                productPrice = parseFloat(productPrice);
                priceEnding = parseFloat(priceEnding);
                let msrpPrice = calculateAutoPrice( productPrice * ( msrp  ) , priceEnding);
                let newPrice = calculateAutoPrice( productPrice * ( price  ) , priceEnding);
                let newSalePrice = calculateAutoPrice( productPrice * ( salePrice  ) , priceEnding);

                msrpPrice = '(List Price $'+ msrpPrice +')';
                if(msrp > 0) {
                    $('#example-msrp').text(msrpPrice);
                } else{
                    $('#example-msrp').text('');
                }
                if(!salePrice || parseFloat(salePrice) < 1) {
                    newSalePrice = newPrice;
                }
                if(parseFloat(newSalePrice) > 0 || parseFloat(salePrice) !==0) {
                    $('#example-sale-price').text('$' + newSalePrice);
                } else {
                    $('#example-sale-price').text('');
                }
                if(price > 0 && salePrice > 0) {
                    $('#example-regular-price').text('$' + newPrice);
                } else {
                    $('#example-regular-price').text('');
                }
            });


            function calculateAutoPrice(price, ending) {
                ending = isNaN(ending) ? 0 : ending;
                const numEnding = price.toFixed(2).substr(-parseFloat(ending).toFixed(2).length),
                    difference = numEnding - ending,
                    placeValue = Math.pow(10, Math.floor(ending).toString().length);
                if (difference > 0) {
                    if(ending > 1){
                        return Math.round((price + placeValue - difference) * 100) / 100 - 10
                    } else {
                        return Math.round((price + placeValue - difference) * 100) / 100 - 1
                    }
                } else if (difference < 0) {
                    return Math.round((price - difference) * 100) / 100
                }
                return Math.round(price);
            }

            function getPriceValue(element,priceEntry) {
                let value = priceEntry.find('#'+element).val();
                value = value === '' || value === undefined ? 0 : value;
                return value;
            }

            $('#add_product_price').click(function () {
                const priceEntry = $(this).closest('tr');
                const msrp = getPriceValue('msrp',priceEntry);
                const price = getPriceValue('price',priceEntry);
                const salePrice = getPriceValue('sale_price',priceEntry);
                const priceEnding = getPriceValue('price_ending',priceEntry);
                const category = priceEntry.find('#product_category_select').children("option:selected");
                const category_id = category.val() === '' ? 0 : category.val();
                const brand = priceEntry.find('#product_brands').children("option:selected");
                const brand_id = brand.val() === '' ? 0 : brand.val();
                let data = { msrp, price, salePrice, priceEnding, category_id, brand_id };
                data = JSON.stringify(data);
                $.ajax({
                    type: 'POST',
                    data: 'data=' + data + '&_token=' + csrf_token,
                    url: '{{ ecommerce_url('pricing/add-auto-price')}}',
                    dataType: 'json',
                }).done(function (response) {
                    $('#auto-price-list tbody').append(`
                    <tr data-id=${response.id}>
                    <td>
                        ${brand.text()}
                    </td>
                    <td>${category.text()}</td>
                    <td><input type="text" class="form-control" name="alternate_price" value="${msrp}"></td>
                    <td><input type="text" class="form-control" name="price" value="${price}"></td>
                    <td><input type="text" class="form-control" name="sale_price" value="${salePrice}"></td>
                    <td><input type="text" class="form-control" name="ending" value="${priceEnding}"></td>
                    <td><input type="hidden" class="form-control" name="category" value="${category_id}"></td>
                    <td><input type="hidden" class="form-control" name="brands" value="${brand_id}"></td>
                    <td>
                        <a href="javascript:void(0)" data-id="${response.id}" class="remove-entry"><i class="fa fa-trash-o"></i></a>
                    </td>
                </tr>
                `);
                    priceEntry.find('#msrp').val('');
                    priceEntry.find('#price').val('');
                    priceEntry.find('#sale_price').val('');
                    priceEntry.find('#price_ending').val('');
                    removeAutoPriceEntry();
                });
            });

            $('#basicAutoComplete').autoComplete({
                minLength: 2,
                resolverSettings: {
                    url: "{{ ecommerce_url('manual-price/search') }}"
                },
                events: {
                    search: function (qry, callback) {
                        $.ajax({
                            type: 'GET',
                            url: 'manual-price/search',
                            data: `q=${qry}`
                        }).done(function (data) {
                            callback(data)
                        })
                    }
                }
            });

            let selectedValue = '';

            $('#basicAutoComplete').on('change', function () {
                selectedValue = '';
            });

            $('#basicAutoComplete').on('autocomplete.select', function (evt, item) {
                selectedValue = item.value;
            });


            $("#btnAddProduct").on('click', function () {
                if (selectedValue !== '') {
                    $.ajax({
                        type: 'POST',
                        url: '{{ ecommerce_url('manual-price/add') }}',
                        data: `id=${selectedValue}`,
                    }).done(function () {
                        toastrShow('Product has been added into the list');
                        manualPriceProductsTable.DataTable().ajax.reload();
                        $('#basicAutoComplete').autoComplete('clear');
                    });
                }
            });
        });

        $('#retail_price_submit').click(function () {
            const btn = $(this);
            processBtnDisable(btn);
            var tiers = {};
            var productIds = [];
            let optionIds = [];
            $('#product_tier_price_listing').find("input[type='text']").each(function (index,input) {
                const inputName = $(input).attr('name');
                const productId = $(input).attr('data-product-id');
                const optionId = $(input).attr('data-option-id');
                const priceType = $(input).attr('data-type');
                const value  = $(input).val();
                var tierPriceType = tiers[inputName] ? tiers[inputName] : {};
                var values = tierPriceType[priceType] ? tierPriceType[priceType] : [];
                values.push(value);
                tiers[inputName] = tiers[inputName] ?  tiers[inputName] : {};
                tiers[inputName][priceType] = values;
                if(productIds.indexOf(productId) < 0) {
                    productIds.push(productId);
                }
                if(optionIds.indexOf(optionId) < 0) {
                    optionIds.push(optionId);
                }
            });
            var data = {tiers, productIds, optionIds};
            data = JSON.stringify(data);
            $.ajax({
                type: 'POST',
                data: 'data=' + data + '&_token=' + csrf_token,
                url: '{{ecommerce_url('retail-price/save-price')}}',
            }).done(function () {
                revertProcessBtnDisable(btn, 'Save');
                toastrShow('Success','Your Prices has been updated successfully!');
            });
        });

        function savePrices() {
            return reloadAjaxSubmit('auto-prices',"{{ ecommerce_url('pricing/save') }}",'name','Save');
        }

        function removeAutoPriceEntry() {
            $('.remove-entry').click(function () {
                if(confirm('Are you sure you want to delete?')) {
                    const thisObj = $(this);
                    const id = thisObj.data('id');
                    $.ajax({
                        type: 'POST',
                        data: 'id=' + id + '&_token=' + csrf_token,
                        url: '{{ecommerce_url('pricing/delete-auto-price')}}',
                    }).done(function () {
                        thisObj.closest('tr').remove();
                    });
                }
            });
        }
        $("#upload-spreadsheet").click(function () {
            $("#upload-prices").click();
        });

        $("#upload-prices").on('change', function () {
            const form = $(this).closest('form');
            const btn = $(form).find('#upload-spreadsheet');
            processBtnDisable(btn);
            $.ajax({
                type: 'POST',
                data: new FormData(form[0]),
                url: '{{ecommerce_url('price-multiplier/update-price')}}',
                dataType: 'json',
                processData: false,
                contentType: false,
            }).done(function (response) {
                if(response.success) {
                    toastrShow('Success','Your Prices will be updated soon!');
                } else{
                    toastrShowError('Error','Please Provide correct data');
                }
                revertProcessBtnDisable(btn, 'Upload Spreadsheet and Run');
            });
        });

        $('#product_category_select').change(function () {
            retailPriceTable.DataTable().ajax.reload();
        });

        $('#product_brand_select').change(function () {
            retailPriceTable.DataTable().ajax.reload();
        });

        $("#manual_price_products_listing").on("click", "#remove_manual_price_entry", function(){
            if(confirm('Are you sure you want to remove ?')) {
                const id = $(this).data('id');
                $.ajax({
                    type: 'POST',
                    data: 'id=' + id + '&_token=' + csrf_token,
                    url: '{{ecommerce_url('manual-price/remove')}}',
                }).done(function (response) {
                    toastrShow('Success', 'Manual Price removed Successfully!');
                    manualPriceProductsTable.DataTable().ajax.reload();
                });
            }
        });
        $("#remove_all_manual_price").click(function () {
            if(confirm('Are you sure you want to remove all manual prices ?')) {
                $.ajax({
                    type: 'POST',
                    url: '{{ecommerce_url('manual-price/remove-all')}}',
                }).done(function (response) {
                    toastrShow('Success', 'All manual Price removed Successfully!');
                    manualPriceProductsTable.DataTable().ajax.reload();
                });
            }
        });

        $('#remove_all_auto_prices').click(function () {
            if(confirm('Are you sure you want to reset Auto Prices for all Products ?')) {
                $.ajax({
                    type: 'POST',
                    url: '{{ ecommerce_url('pricing/remove-all-prices')}}',
                }).done(function (response) {
                });
            }
        });

        $(document).ready(function() {

            applyAjaxSelect2Multiple("#exclude_product_id", "{{ ecommerce_url('product/search-product')}}");
            applyAjaxSelect2Multiple("#exclude_category_id", "{{ ecommerce_url('category/search-category')}}");
            $('#clearBtn').click(function () {
                $('#exclude_product_id').val(null).trigger('change');
            });

            $('#add_discount_role').on('click', function() {

                const object = $(this);
                var fromRole = $(this).closest('tr').find('.from_role').val();
                var toRole = $(this).closest('tr').find('.to_role').val();
                var discount = $(this).closest('tr').find('.discount').val();


                if( fromRole != '' && toRole != '' && discount != '' ) {

                    var cloned = $(object).closest('tr').clone();
                    const table = $(object).closest('table');

                    const fromTiers = roleTiers[fromRole].split(',');
                    const toTiers = roleTiers[toRole].split(',');

                    const tierFilter = toTiers.filter(value => fromTiers.includes(value));
                    if( tierFilter.length == 0 ) {
                        $(object).closest('tr').find('.from_role').val('');
                        $(object).closest('tr').find('.to_role').val('');
                        $(object).closest('tr').find('.discount').val('');

                        table.find('tbody').append(cloned);

                        table.find('tbody').find('tr:last').find('.from_role').val(fromRole).trigger('change');
                        table.find('tbody').find('tr:last').find('.to_role').val(toRole).trigger('change');
                        table.find('tbody').find('tr:last').find('td:last').html('<a href="javascript:void(0)" class="remove-discount"><i class="fa fa-trash-o"></i></a>');
                    } else {
                        toastrShowError('Roles having same pricing tiers', 'Error');
                    }
                } else {
                    $(object).closest('tr').find('.to_role').val('').change();
                }
            });

        });

        function saveAutoDiscounts() {
            //return reloadAjaxSubmit('discount-tool',"{{ ecommerce_url('pricing/discount') }}", 'name', 'Save');
        }

        $('.discount_run').on('click', function() {
            const btn = $(this);
            processBtnDisable(btn);

            $.ajax({
                type: 'POST',
                data: '_token=' + csrf_token,
                url: '{{ ecommerce_url('pricing/discount-run') }}',
                dataType: 'json'
            }).done(function (response) {
                if(response.success) {
                    toastrShow('Success', 'Discounts has been updated successfully!');
                } else {
                    toastrShowError('Error', 'Please Provide correct data');
                }
                revertProcessBtnDisable(btn, 'Run & Calculate');
            });

        });

        $(document).on('click', '.remove-discount', function() {
            $(this).closest('tr').remove();
        });

        $(document).on('click', '.syncAutoPrices', function() {
            const btn = $(this);
            processBtnDisable(btn);
            $.ajax({
                type: 'POST',
                data: '_token=' + csrf_token,
                url: '{{ ecommerce_url('pricing/sync-prices') }}',
                dataType: 'json'
            }).done(function (response) {
                toastrShow('Success', 'Your prices will be sync soon!');
                revertProcessBtnDisable(btn, 'Sync Prices');
            });
        });

    </script>
@endsection