@extends('layout.header')
@section('title')
    ALIAN | Allocate New Stock
@endsection
@section('main')
    <div class="m-grid__item m-grid__item--fluid m-wrapper">
        <!-- BEGIN: Subheader -->
        <div class="m-subheader ">
            <div class="d-sm-flex align-items-center subheader_border_bottom">
                <div class="mr-auto">
                    <h3 class="m-subheader__title m-subheader__title--separator">
                        Allocate New Stock
                    </h3>
                    <ul class="m-subheader__breadcrumbs m-nav m-nav--inline">
                        <li class="m-nav__item m-nav__item--home">
                            <a href="#" class="m-nav__link m-nav__link--icon">
                                <i class="m-nav__link-icon la la-home"></i>
                            </a>
                        </li>
                        <li class="m-nav__separator">
                            -
                        </li>
                        <li class="m-nav__item">
                            <a href="" class="m-nav__link">
                                            <span class="m-nav__link-text">
                                                Stock Allocation
                                            </span>
                            </a>
                        </li>
                        <li class="m-nav__separator">
                            -
                        </li>
                        <li class="m-nav__item">
                            <a href="" class="m-nav__link">
                                            <span class="m-nav__link-text">
                                                Allocate New Stock
                                            </span>
                            </a>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <!-- END: Sub header -->
        <!-- START :: main Content-->
        <div class="m-content admin_stock_allocation_13_2">
            <div class="m-portlet m-portlet--mobile margin_bottom_60">
                <div class="m-portlet__head resp_head_btn">
                    <div class="m-portlet__head-caption">
                        <div class="m-portlet__head-title">
                            <h3 class="m-portlet__head-text">
                                Allocate New Stock
                            </h3>
                        </div>
                    </div>
                    <div class="m-portlet__head-tools">
                        <ul class="m-portlet__nav admin_form_record">
                            <li class="m-portlet__nav-item">
                                <a href="#" class="blue_bg_shadow_btn" data-toggle="modal" data-target="#m_modal_4" onclick="finalizeAllocation()">
                                                <span>
                                                    <i class="la la-check btn_text submit_icon"></i>
                                                    <span class="btn_text text-capitalize">
                                                        submit
                                                    </span>
                                                </span>
                                </a>
                            </li>
                            <li class="m-portlet__nav-item">
                                <a href="#" class="gray_bg_btn">
                                                <span>
                                                    <span class="btn_text">
                                                        Cancel
                                                    </span>
                                                </span>
                                </a>
                            </li>
                        </ul>
                    </div>
                </div>
                <div class="m-portlet__body">
                    <!-- Salesperson Information :: START -->
                    <div class="sales_person_info">
                        <h6 class="title">Salesperson Information</h6>
                        <!--begin: Datatable -->
                        <div class="m_datatable m-datatable m-datatable--default m-datatable--loaded m-portlet__body m-datatable__body p-0">
                            <div id="m_table_1_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                                <div class="row m-0">
                                    <div class="col-sm-12 p-0 table_style_2 sales_person_info">
                                        <div class="table">
                                            <div class="table_header">
                                                <div class="table_row">
                                                    <div class="th"><h6>Salesperson</h6></div>
                                                    <div class="th"><h6>Allocated Stock</h6></div>
                                                    <div class="th"><h6>Sold Product Amount</h6></div>
                                                    <div class="th"><h6>Pre-Orders</h6></div>
                                                    <div class="th"><h6>Action</h6></div>
                                                </div>
                                            </div>
                                            <div class="tbody">
                                                <div class="table_row">
                                                    <div class="td" data-title="Salesperson">
                                                                    <span>
                                                                        <span class="img_person">
                                                                            <img src="{{URL::to('sales_images/' . $user["user_details"]->profile_image)}}" onerror=this.src="{{URL::asset('sales_images/IMG1550210555_images.png')}}">
                                                                        </span>
                                                                        <span class="img_content_10">
                                                                            {{ $user["user_details"]->name }}
                                                                            <span>{{ $user["user_details"]->user_city }}</span>
                                                                        </span>
                                                                    </span>
                                                    </div>
                                                    <div class="td" data-title="Allocated Stock"><span>{{ $user["stock_sum"] }}</span></div>
                                                    <div class="td" data-title="Sold Product Amount"><span class="color_green_font">&#x20b9;{{ $user["sold_product_amount"]}}</span></div>
                                                    <div class="td" data-title="Pre-Orders"><span>{{ $user["preorders"] }}</span></div>
                                                    <div class="td" data-title="Action"><span><a class="close_icon" href="#"> <img src="{{URL::to('images/close_013.png')}}" alt=""/></a></span></div>

                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--  END: currently registered users table-->
                        </div>
                        <!--end: Datatable -->
                    </div>
                    <!-- Salesperson Information :: END -->
                    <!-- Available Stocks :: START -->
                    <div class="col-12 stock_main_20">
                        <div class="row">
                            <div class="col-6 pl-0">
                                <div class="available_stock_13_2">
                                    <h6>Available Stocks</h6>
                                    <div class="stock_content_20 admin_orders_table">
                                        <ul class="m-portlet__nav admin_form_record">
                                            <li class="m-portlet__nav-item">
                                                <form class="search_form">
                                                    <input type="text" class="input_text" placeholder="Search" onkeyup="searchMaster()">
                                                    <button type="submit" class="input_button"><i class="la-search line_awsome"></i></button>
                                                </form>
                                            </li>
                                            <li class="m-portlet__nav-item">

                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                            <div class="col-6 pr-0">
                                <div class="allocate_stock_13_2">
                                    <h6>Allocate Stock</h6>
                                    <div class="stock_content_20 admin_orders_table">
                                        <ul class="m-portlet__nav admin_form_record">
                                            <li class="m-portlet__nav-item">
                                                <form class="search_form">
                                                    <input type="text" class="input_text" placeholder="Search" onkeyup="searchUser()">
                                                    <button type="submit" class="input_button"><i class="la-search line_awsome"></i></button>
                                                </form>
                                            </li>
                                            <li class="m-portlet__nav-item">
                                                <div class="new_order_btn" id="submit_btn_13_2" onclick="allocateStock()">
                                                                <span>
                                                                    <span>
                                                                        Allocate Now
                                                                    </span>
                                                                </span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                    <!-- Available Stocks :: END -->
                    <!--Allocate Stock :: START-->
                    <div class="stock_table_13_2_table">
                        <div class="table_style_3 unallocated_stock_right_main">
                            <div class="m_datatable m-datatable m-datatable--default m-datatable--loaded m-portlet__body m-datatable__body p-0">
                                <div class="m-scrollable" data-scrollbar-shown="true" data-axis="xy" data-scrollable="true"  data-max-height="180px">
                                    <div style="width: 100%;">
                                        <div id="m_table_1_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                                            <div class="row m-0">
                                                <div class="col-sm-12 p-0" >
                                                    <div class="table" id="master-table">
                                                        <div class="table_header">
                                                            <div class="table_row">
                                                                <div class="th">

                                                                </div>
                                                                <div class="th"><h6>Product<i class="flaticon-up-arrow"></i></h6></div>
                                                                <div class="th"><h6>Unallocated Stock</h6></div>
                                                                <div class="th"><h6>Allocate</h6></div>
                                                            </div>
                                                        </div>
                                                        <div class="tbody">
                                                            @foreach($products as $product)
                                                                <div class="table_row">
                                                                    <div class="td" data-title="Product">
                                                                        <div class="check_text text">
                                                                            <input type="checkbox" id="check1" class="check_list test" onchange="stageAllocate()">
                                                                            <label for="check1"></label>
                                                                        </div>
                                                                    </div>
                                                                    <div class="td" data-title="Product"><span> {{ $product->product_name }}</span></div>
                                                                    <div class="td" data-title="Unallocated Stock"><span> {{ $product->product_stock }}</span></div>
                                                                    <div class="td" data-title="Allocate"><span><input type="number" id="text1" class="textbox allocate" disabled></span></div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--  END: currently registered users table-->

                            </div>
                        </div>
                        <div class="table_style_3 allocated_stock_left_main">
                            <div class="m_datatable m-datatable m-datatable--default m-datatable--loaded m-portlet__body m-datatable__body p-0">
                                <div class="m-scrollable" data-scrollbar-shown="true" data-axis="xy" data-scrollable="true"  data-max-height="180px">
                                    <div style="width: 100%;">
                                        <div id="m_table_1_wrapper" class="dataTables_wrapper container-fluid dt-bootstrap4 no-footer">
                                            <div class="row m-0">
                                                <div class="col-sm-12 p-0" >
                                                    <div class="table" id="user-table">
                                                        <div class="table_header">
                                                            <div class="table_row">
                                                                <div class="th"><h6>Product</h6></div>
                                                                <div class="th"><h6>Allocated</h6></div>
                                                                <div class="th"><h6>New Added Stock</h6></div>
                                                            </div>
                                                        </div>
                                                        <div class="tbody">
                                                            @foreach($user["user_products"] as $product)
                                                                <div class="table_row">
                                                                    <div class="td" data-title="Product"><span>{{ $product["product_name"] }}</span></div>
                                                                    <div class="td" data-title="Allocated"><span>{{ $product["stock"] }}</span></div>
                                                                    <div class="td" data-title="New Added Stock"><span><span id ="divid" class="text_display_val"></span></span></div>
                                                                </div>
                                                            @endforeach
                                                        </div>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                                <!--  END: currently registered users table-->

                            </div>
                        </div>
                    </div>
                    <!--Allocate Stock :: END-->
                </div>
                <!--Allocate Stock Table :: START-->

                <!--Allocate Stock Table :: END-->
                <!--UnAllocate Stock Table :: START-->

                <!--UnAllocate Stock Table :: END-->
            </div>
        </div>
    </div>

    <script>
        let token = '{{ @csrf_token() }}'
        let stageAllocate = function() {
            let el = event.target.parentNode.parentNode.parentNode.children[3].children[0].children[0]
            let masterTable = document.querySelector('#master-table')
            let rows = masterTable.children[1].children
            if(event.target.checked){
                el.removeAttribute('disabled')
            }

            else{
                let product = event.target.parentNode.parentNode.parentNode.children[1].children[0].innerHTML
                for(let i=0;i<rows.length;i++) {
                    if(product === rows[i].children[0].innerHTML) {
                        rows[i].children[2].children[0].innerHTML = null
                        break
                    }
                }
                el.setAttribute('disabled', 'disabled')
                el.value = null
            }
        }

        let allocateStock = function() {
            event.preventDefault()
            let flag = 0
            let userTable = document.querySelector('#user-table')
            let userRows = userTable.children[1].children
            let inputs = document.querySelectorAll('.allocate')

            let masterTable = document.querySelector('#master-table')
            let masterRows = masterTable.children[1].children

            //MASTER TABLE VALIDATION
            let inputVal = 0
            let availableStocks = 0
            for(let i=0; i<masterRows.length; i++) {
                inputVal = parseInt(masterRows[i].children[3].children[0].children[0].value)
                availableStocks = parseInt(masterRows[i].children[2].children[0].innerHTML)
                if(availableStocks < inputVal) {
                    alert("Insufficient stocks")
                    flag = 1
                }
            }


            //STOCK ALLOCATION TO USER TABLE
            if(flag === 0) {
                let allocateStocks = []
                inputs.forEach((input)=> {
                    if(!input.disabled)
                        allocateStocks.push(input.value)
                    else
                        allocateStocks.push(0)
                })

                for(let i=0;i<userRows.length;i++) {
                    if(allocateStocks[i])
                        userRows[i].children[2].children[0].children[0].innerHTML = allocateStocks[i]
                }
            }

            //TABLE SORTING

            for(i=0; i< userRows.length; i++){
                if(userRows[i].children[2].children[0].children[0].innerHTML){
                    userRows[i].parentNode.insertBefore(userRows[i], userRows[0])
                    masterRows[i].parentNode.insertBefore(masterRows[i], masterRows[0])
                }
            }

        }

        let finalizeAllocation = function() {
            let products = []
            let userTable = document.querySelector('#user-table')
            let rows = userTable.children[1].children
            let name = null,
                deltaStock = 0,
                userId = '{{$user["user_id"]}}'
            for(let i=0;i<rows.length;i++) {
                name  = rows[i].children[0].children[0].innerHTML
                console.log(rows[i].children[2].children[0].children[0].innerHTML)
                if(parseInt(rows[i].children[2].children[0].children[0].innerHTML)) {
                    deltaStock = parseInt(rows[i].children[2].children[0].children[0].innerHTML)
                    products.push({
                        name, deltaStock
                    })
                }
            }

            $.ajax({
                type: 'POST',
                url: '../allocateStock',
                data: {
                    products,
                    userId,
                    _token: token
                }
            }).then(function(response) {
                window.location = '../stockAllocation'
            })
        }

        let searchMaster = function () {
            let searchVal = event.target.value.toLowerCase()
            let masterTable = document.querySelector("#master-table")
            let masterRows = masterTable.children[1].children
            for(let i=0;i<masterRows.length;i++) {
                if(masterRows[i].children[1].children[0].innerHTML.toLowerCase().indexOf(searchVal) > -1)
                   masterRows[i].style.display = ""
                else
                    masterRows[i].style.display = "none"
            }

        }

        let searchUser = function() {
            let searchVal = event.target.value.toLowerCase()
            let userTable = document.querySelector("#user-table")
            let userRows = userTable.children[1].children
            for(let i=0;i<userRows.length;i++){
                if(userRows[i].children[0].children[0].innerHTML.toLowerCase().indexOf(searchVal) > -1)
                    userRows[i].style.display = ""
                else
                    userRows[i].style.display = "none"
            }
        }
    </script>
    @include('includes.scripts')

@endsection