@extends('layouts.app')
@section('title', 'Kitting')
@section('extrastyles')
    <link rel="stylesheet" href="{{ asset('/plugins/jquery-ui/jquery-ui-1.10.4.custom.min.css') }}">
    <link href="{{ asset('plugins/select2/select2.css') }}" rel="stylesheet">


    <style>
        #product-list {
            width: 100%;
        }
        #product-list .product {
            float: left;
            margin-right: 1%;
            margin-bottom: 15px;
            padding: 5px;
            border: 1px solid #ddd;
            text-align: center;
            width: 100%;
        }
        .product_actions a{
            color: #F24D29 !important;
        }
        .product_actions a:hover{
            color: #F35F3E !important;
        }
        #product-list .product h3 {
            margin: 3px 0;
        }
        .product-catalog-navbar{
            background: #313131;
            border-radius: 10px;
        }
        @media (min-width: 992px)
        {
            .col-lg-3{
                float: left;
            }
        }
        #page_length{
            width: 100%;
        }
        .product-image{
            width: 100%;
            background-repeat: no-repeat;
            background-size: contain;
            background-position: center;
            padding-bottom: 100%;
        }
        .catalogView.active {
            color: #F24D29;
            box-shadow: none;
        }
        .catalogView{
            color: #353535;
        }
    </style>
@endsection

@section('content')
    <div class="studio98_websters" >
        <div class="ibox float-e-margins">
            <div class="ibox-title2">
                <h5>My Kitting</h5>
                <div class="pull-right">
                    <a class="btn btn-primary" href="{!! ecommerce_url('kitting/add') !!}" >
                        Add Kitting
                    </a>
                </div>
            </div>
            <div class="ibox-content p-md">
                @include('flash::message')
                <div class="row">
                    <div class="col-lg-3">
                        <div class="form-group">
                            <select class="form-control" name="cid" id="product_category_select">
                                <option value="">-- Select Category --</option>
                                @foreach($categories as $category)
                                    <option value="{{$category->id}}" {{ $category->id == $category_id ? 'selected' : '' }}>{{$category->title}}</option>
                                    @foreach($category->children as $sub)
                                        <option value="{{$sub->id}}" {{ $sub->id == $category_id ? 'selected' : '' }}>&nbsp;&nbsp;{{$sub->title}}</option>
                                        @foreach($sub->children as $subsub)
                                            <option value="{{$subsub->id}}" {{ $subsub->id == $category_id ? 'selected' : '' }}> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp; {{$subsub->title}}</option>
                                        @endforeach
                                    @endforeach
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            <select class="form-control" name="cid" id="product_tag_select">
                                <option></option>
                                @foreach($tags as $tag)
                                    <option value="{{$tag->id}}" {{ in_array(  (string) $tag->id , $selectedTags   ) ? 'selected' : ''  }} >{{ $tag->name }}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>
                    <div class="col-lg-3">
                        <div class="form-group">
                            {!! Form::text('v', $search, ['class' => 'form-control tt-input','placeholder' => 'Search...','id' => 'product_search']) !!}
                        </div>
                    </div>
                    @if(count($regions) > 1)
                        <div class="col-lg-3">
                            <div class="form-group">
                                {!! Form::select('region_id', $regions,$region, ['class' => 'form-control tt-input','placeholder' => 'All','id' => 'product_search_region']) !!}
                            </div>
                        </div>
                    @endif
                    <div class="col-lg-3">
                        <button type="button" class="btn btn-primary" id="sSearch" onclick="searchProduct()">Search</button>
                        <input type="hidden" name="is_page" value="?page=1">
                        <div class="pull-right">
                            <a href="javascript:void(0)" class="btn btn-xs catalogView active tooltip_info" title="Grid View" data-action="grid"><i class="fa fa-th fa-2x"></i></a>
                            <a href="javascript:void(0)" class="btn btn-xs catalogView tooltip_info" title="List View"  data-action="list"><i class="fa fa-th-list fa-2x"></i></a>
                        </div>
                    </div>
                    <div class="clearfix"></div>
                </div>
                <div class="clearfix"></div>
                <div class="row">
                    <div class="col-sm-12">
                        <div id="entries_info" class="pull-left"></div>
                        <div id="page_pagination" class="pull-right"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <div class="studio98_websters">
        <div class="ibox float-e-margins">
            <div class="ibox-title2">
                <div class="row">
                    <div class="col-auto">
                        <h5>Search Results</h5>
                    </div>
                    <div class="col-auto ml-auto">
                        <select class="form-control pull-right" name="page_length" id="page_length" >
                            <option value="20">20</option>
                            <option value="50">50</option>
                            <option value="100">100</option>
                            <option value="0">All</option>
                        </select>
                    </div>
                </div>
            </div>
            <div class="ibox-content p-md">
                @include('flash::message')
                <div id="table_searching"></div>
                <div class="clearfix"></div>
                <div class="row" id="product-list-parent">
                    <div class="col-lg-12">

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

{{--    @include('Product::my-catalog._modal')--}}
{{--    @include('Website::layout._gallery_popup')--}}
@endsection

@section('footer')
<script src="{{ asset('/plugins/select2/select2.js') }}"></script>
    <script>
        const isDsEnable = '{!! isDirectScaleEnable() !!}';
        const isTTEnable = '{!! isTeqTankEnable() !!}';

        const mlmService = (isDsEnable !=='' && parseInt(isDsEnable)) || (isTTEnable !=='' && parseInt(isTTEnable)) ? true : false;
        var selectedCategory = "";
        var catalogViewKey = '{{ combined_app_id() }}-catalog-view';
        $(document).ready(function() {
            const urlParams = new URLSearchParams(window.location.search);
            const tags = urlParams.get('tags');
            $('#product_tag_select').val([]);
            $( "#product_tag_select" ).select2({
                multiple: true,
                placeholder: "-- Select tags --",
            });
            if (tags) {
                $('#product_tag_select').val(tags.split(",").filter((c) => c).map((c) => +c));
                $('#product_tag_select').trigger('change');
            }
            var catalogView = localStorage.getItem(catalogViewKey);
            if( catalogView ) {
                $('.catalogView').removeClass('active');
                $('.catalogView[data-action="'+catalogView+'"]').addClass('active');
            }
            makeProductSortable();
            $('#product_search').keyup(function (e) {
                if(e.keyCode == 13) {
                    searchProduct();
                }
            });
            searchProduct();
            setFeaturedImage();
            $('select[name=page_length]').change(function () {
                searchProduct();
            });


        });

        function makeProductSortable() {
            $('.products-sortable').sortable({
                tolerance: 'pointer',
                forcePlaceholderSize: true,
                opacity: 1,
                update: function (event, ui) {
                    var productIds = [];
                    $(".products-sortable").each(function() {
                        productIds = productIds.concat($(this).sortable('toArray', {
                            attribute: 'data-id'
                        }));
                    });
                    // var productIds = $(".products-sortable").sortable('toArray', {
                    //     attribute: 'data-id'
                    // });
                    var categoryId = $('#product_category_select').children("option:selected").val();
                    $.ajax({
                        data: 'productIds=' + productIds + '&_token='+csrf_token + '&category_id=' + categoryId+'&isKitting=1',
                        type: 'POST',
                        url: '{{ ecommerce_url("products/sorting") }}',
                    }).done(function() {
                    });
                }
            }).disableSelection();
        }

        function searchProduct() {
            var text = $('#product_search').val();
            var isSearch = false;
            var search_str = '';
            var region_id = '{{ (request()->has('region')) ? 'region=yes' : '' }}';
            var selectedRegion = $('#product_search_region').val();
            if(selectedRegion && parseInt(selectedRegion) > 0) {
                region_id = 'region='+selectedRegion;
            }
            var selectedTags = $("#product_tag_select").val();
            if (typeof selectedTags === "string" && !!selectedTags) selectedTags = [selectedTags];
            selectedCategory = $('#product_category_select').children("option:selected").val();
            if(text !== '') {
                search_str = '?search=' + text;
            }
            if(selectedCategory !== '' || selectedTags.length > 0) {
                isSearch = true;
                search_str += text !== '' ? '&category=' + selectedCategory : '?category=' + selectedCategory;
            }


            const urlParams = new URLSearchParams(search_str);

            if (selectedTags) {
                urlParams.set("tags", selectedTags.join(","))
            }


            search_str = (search_str != '') ? search_str+'&'+region_id: '?'+region_id;
            window.history.pushState("{}", "", '{{ ecommerce_url('kitting')}}'+`?${unescape(urlParams.toString())}`);
            getProducts(text, selectedCategory, isSearch, null,urlParams.get("tags"));
        }

        $(document).on('click', '.catalogView', function () {
            if( !$(this).hasClass('active') ) {
                $('.catalogView').removeClass('active');
                $(this).addClass('active');
                searchProduct();
                localStorage.setItem(catalogViewKey, $(this).data('action'));
            }
        });

        function getProducts(text, selectedCategory, isSearch, page, selectedTags) {
            page = !page ? 1 : page;
            var size = $('#page_length').val();
            var region_id = '{{ (request()->has('region')) ? 'yes' : '' }}';
            var selectedRegion = $('#product_search_region').val();
            if(selectedRegion && parseInt(selectedRegion) > 0) {
                region_id = selectedRegion;
            }
            $('#product-list-parent').prepend(`<div class="catalogLoader" style="position: absolute; width: 100%; height: 100%; background: rgba(255,255,255,.5); z-index: 99;left: 0;text-align: center; "><i class="fa fa-spinner fa-spin fa-3x"></i></div>`);
            $.ajax({
                method: 'get',
                url: '{{ ecommerce_url('kitting/show') }}',
                data: 'text=' + text+'&category_id='+selectedCategory+'&isSearch='+isSearch+'&size='+size + '&page=' + page+'&region='+region_id+'&tags='+selectedTags,
                dataType: 'json',
            }).done(function(response) {
                setProductsHtml(response.products, page);
                $('#product-list-parent').find('.catalogLoader').remove();
                if(selectedCategory !== "") {
                    $('#category_image_btn').css('display','block');
                }
                setFeaturedImage();
                makeProductSortable();
                if( response != '' ) {
                    loadProductsWithScroll(text, selectedCategory, isSearch, page,selectedTags);
                }
            });
        }

        function gridViewHtml(products,page) {
            var pHtml = '';
            if (page == 1) {
                pHtml = '<div id="product-list" class="row ui-sortable sortabl products-sortable">';
            }else {
                pHtml = '';
            }
            $.each(products, function (index, product) {
                let duplicateBtn = '';
                if(!mlmService) {
                    duplicateBtn = `| <a href="javascript:void(0)" data-id="${product.id}" class="duplicate_kit">Duplicate</a>`;
                }

                pHtml += `<div class="col-sm-6 col-md-6 col-lg-4 col-xl-3" data-id=${product.id}>
                    <div class="product top-seller ui-sortable-handle" style="min-height: 370px;">
                        <h3>${product.title}</h3>
                        <div class="product-image" id="${product.media_id}" style="background-image: url(${product.image})">
                        </div>
                        <div class="product-badge"></div>
                        <ul style="list-style-type: none; padding-left: 0px;">
                            <li>SKU: <span class="sku">${product.sku}</span></li>
                            <li>Brand: <span class="brand">${product.brand}</span></li>
                            ${product.price > 0 ? `<li>Price: $<span class="price">${product.price}</span></li>` : ''}
                            ${product.list_price > 0 ? `<li><span class="alt-price-name">List Price</span>: $<span class="alt-price">${product.list_price}</span></li>` : ''}
                        </ul>
                        <p class="product_actions">
                            ${product.absolute_link != '' ? `<a href="${product.absolute_link}" target="_blank" class="view-product">View</a>` : ''}
                            | <a href="javascript:void(0)" onclick="removeKit(${product.id})" class="remove">Remove</a>
                            ${duplicateBtn}
                            | <a href="{{ ecommerce_url('kitting/edit') }}/${product.id}" >Edit</a>
                        </p>
                    </div>
                </div>`;
            });
            pHtml += '</div>';
            return pHtml;
        }

        function listViewHtml(products) {
            var pHtml = '';

            $.each(products, function (index, product) {
                let duplicateBtn = '';
                if(!mlmService) {
                    duplicateBtn = `| <a href="javascript:void(0)" data-id="${product.id}" class="duplicate_kit">Duplicate</a>`;
                }

                pHtml += `<tr data-id=${product.id}>
                        <td>
                            <div class="feature_image">
                                <img src="${product.image}" style="max-width: 100px; max-height: 100px;">
                            </div>
                        </td>
                        <td>${product.title}</td>
                        <td>${product.sku}</td>
                        <td>${product.brand}</td>
                        <td>${product.price ? product.price : ''}</td>
                        <td>${product.category}</td>
                        <td>${product.absolute_link != '' ? `<a href="${product.absolute_link}" target="_blank" class="view-product">View</a>` : ''}
                                                    | <a href="javascript:void(0)" onclick="removeKit(${product.id})" class="remove">Remove</a>
                                                    ${duplicateBtn}
                                                    | <a href="{{ ecommerce_url('kitting/edit') }}/${product.id}" >Edit</a>
                        </td>
                    </tr>`;
            });
            return pHtml;
        }

        function setProductsHtml(products, page)
        {
            //var catalogView = $('.catalogView.active').data('action');
            var catalogView = localStorage.getItem(catalogViewKey);
            if(catalogView == null) {
                catalogView = 'grid';
            }
            var pHtml = '';

            if( catalogView == 'list' ) {
                pHtml = listViewHtml(products);
            } else {
                pHtml = gridViewHtml(products,page);
            }

            if( (!page || page < 2) && catalogView == 'list' ) {
                pHtml = `<div id="product-table-list" class="products-table-sortable" style="width: 100%;">
                        <table class="table table-striped table-hover table-bordered dataTable " style="width: 100%;">
                       <thead>
                        <tr>
                            <td>Image</td>
                            <td>Title</td>
                            <td>Sku</td>
                            <td>Brand</td>
                            <td>Price</td>
                            <td>Category</td>
                            <td>Action</td>
                        </tr>
                      </thead><tbody class="products-sortable">${pHtml}</tbody>
                    </table>
                   </div>`;
            }

            var parent = $('#product-list-parent');
            if( catalogView == 'list' && page > 1 ) {
                parent = $('#product-list-parent').find('tbody');
            } else if ( catalogView == 'grid' && page > 1 ) {
                parent = $('#product-list-parent').find('.products-sortable');
            }
            if( page > 1 ) {
                $(parent).append(pHtml);
            } else {
                $(parent).html(pHtml);
            }
            return pHtml;
        }

        function loadProductsWithScroll(text, selectedCategory, isSearch, page,selectedTags) {
            $(document).unbind('scroll');
            $(document).on('scroll', function() {
                var bottomScroll = parseFloat($(document).height() - $(window).height() - $(window).scrollTop());
                if( Math.ceil( bottomScroll ) <= 1150 ) {
                    $(document).unbind('scroll');
                    page += 1;
                    getProducts(text, selectedCategory, isSearch, page,selectedTags);
                }
            });
        }

        function setFeaturedImage()
        {
            $('.category_image_btn').on('click', function () {
                if(confirm('Are you sure you want to set this item image as the featured image for this category?'))
                {
                    var media_id = $(this).attr('id');
                    $.ajax({
                        method: 'POST',
                        url: '{{ ecommerce_url('category/featured/')}}',
                        data: 'category_id='+selectedCategory+'&_token='+csrf_token+'&media_id='+media_id,
                    }).done(function() {
                        toastrShow('Success','Category Featured Image selected Successfully!');
                    });
                }
            });
        }

        function removeKit(id) {
            if(confirm('Are you sure you want to delete it?')) {
                $.ajax({
                    method: 'post',
                    url: '{{ ecommerce_url('kitting/delete-kit/')}}',
                    data: 'kit_id=' + id + '&_token={{ csrf_token() }}',
                    dataType: 'json'
                }).done(function (response) {
                    toastrShow('Kit has been deleted Successfully!','Success');
                    location.reload();
                });
            }
        }
        function blockProduct(id) {
            if(confirm('Are you sure you want to block it?')) {
                $.ajax({
                    method: 'post',
                    url: '{{ ecommerce_url('product/block-product/')}}',
                    data: 'product_id=' + id + '&_token={{ csrf_token() }}',
                    dataType: 'json'
                }).done(function (response) {
                    toastrShow('Product has been blocked Successfully!','Success');
                });
            }
        }
        function storeData(object)
        {
            return reloadAjaxSubmit('update_product_data',"{{ ecommerce_url('products/store') }}",'name','Submit');
        }

        function getProduct(product_id) {
            $('#selected_product').val(product_id);
            $.ajax({
                method: 'get',
                url: '{{ ecommerce_url('products/edit-product') }}/'+product_id,
            }).done(function (response) {
                $('#edit_product .modal-body').html(response);
                $('.note-insert.btn-group,.note-color,.note-height ,.note-help ,.note-fontname, [data-event=removeFormat]').remove();
                $('#edit_product').modal('show');
            });
        }

        function refresh_pages() {

            var statusString    = '';
            var page_listing    = $("#page_listing");
            var page_pagination = $("#page_pagination");
            var entries_info    = $("#entries_info");

            statusString = '&page_status=1';

            var search = $('#product_search').val();
            var selectedCategory = $('#product_category_select').children("option:selected").val();
            var selectedPrice= $('#product_price_select').children("option:selected").val();
            var selectedType = $('#product_sku_select').children("option:selected").val();

            var page_length     =  $('select[name=page_length]').val();
            var data = '_token={{ csrf_token() }}';
            var page_length =  $('select[name=page_length]').val();
            data += '&post_type={{ (Request :: has('post_type')) ? Request::input('post_type') : '' }}';
            data += '&search='+search;
            data += '&page_length='+page_length;
            data += '&search_category='+selectedCategory;
            data += '&search_price='+selectedPrice;
            data += '&search_type='+selectedType;

            if(statusString != '')
                data += statusString;

            var is_page = $("input[name=is_page]").val();

            $("#table_searching").html('<span class="fa fa-spinner fa-spin"></span>&nbsp;Searching...');
            $.ajax({
                method: 'GET',
                url: '{{ ecommerce_url('kitting/records') }}'+is_page,
                data: data,
                dataType: 'json',
            }).done(function(data) {

                // $("#table_searching").html('');
                // page_listing.html(data.html);
                // page_pagination.html(data.pagination);
                // entries_info.html(data.info);
                // refreshPaggination();
                // doActionPages();
            });
        }

        $(document).on('click', '.duplicate_kit', function () {
            const proId = $(this).data('id');
            const btn = $(this);
            processBtnDisable(btn);
            $.ajax({
                method: 'post',
                url: '{{ ecommerce_url('kitting/duplicate-kit/')}}',
                data: 'proId=' + proId + '&_token={{ csrf_token() }}',
                dataType: 'json'
            }).done(function (response) {
                toastrShow('Product has been duplicated Successfully!','Success');
                revertProcessBtnDisable(btn,'Duplicate');
                setTimeout(() => {
                    location.reload();
                },500)
            });
        });

    </script>
@endsection