@extends('layout.header')
@section('title')
    ALIAN | Stock Allocation
@endsection
@section('main')

    <div class="m-grid m-grid--hor m-grid--root m-page">
        <!-- begin::Body -->
        <div class="m-grid__item m-grid__item--fluid m-grid m-grid--ver-desktop m-grid--desktop m-body">
            <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">
                                Stock Allocation
                            </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">
                                                Sales Order Management
                                            </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">
                                                Stock Allocation
                                            </span>
                                    </a>
                                </li>
                            </ul>
                        </div>
                    </div>
                </div>
                <!-- END: Sub header -->

                <!-- START :: main Content-->
                <div class="m-content admin_stock_allocation_13">
                    <div class="m-portlet m-portlet--mobile margin_bottom_60">
                        <div class="m-portlet__head">
                            <div class="m-portlet__head-caption">
                                <div class="m-portlet__head-title">
                                    <h3 class="m-portlet__head-text">
                                        Stock Allocation
                                    </h3>
                                </div>
                            </div>
                        </div>
                        <div class="m-portlet__body">
                            <!--begin :: Search Person-->
                            <div class="search_sales_person_main">
                                <div class="search_sales_person_label">
                                    <label>Search Salesperson:</label>
                                </div>
                                <div class="search_sales_person_content">
                                    <div class="m-dropdown m-dropdown--inline  m-dropdown--arrow m-dropdown--align-left" m-dropdown-toggle="click">
                                        <input type="text" class="m-dropdown__toggle dropdown-toggle text-left" placeholder="Search" onkeyup="search(value)">
                                        <div class="m-dropdown__wrapper">
                                            <div class="m-dropdown__inner">
                                                <div class="m-dropdown__body">
                                                    <div class="m-dropdown__content">
                                                        <ul class="m-nav" id="searchResult">
                                                        </ul>
                                                    </div>
                                                </div>
                                            </div>
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <!--end :: Search Person-->

                            <!--begin :: Selected Person-->
                            <div class="selected_person_main">
                                @for( $i=0; $i<sizeof($users); $i++)
                                    <div class="selected_person">
                                        <a href="{{'allocateNewStock/' . $users[$i]->id}}" class="">
                                                <span>
                                                    <span class="img_person">
                                                        <img src="{{URL::to('sales_images/' . $users[$i]->profile_image)}}" onerror=this.src="sales_images/IMG1550210555_images.png">
                                                    </span>
                                                    <span class="img_content_10">
                                                        {{ $users[$i]->name }}
                                                        <span>{{ $users[$i]->user_city }}</span>
                                                    </span>
                                                </span>
                                        </a>
                                    </div>
                                @endfor
                            </div>
                            <!--end :: Selected Person-->
                        </div>
                    </div>
                </div>
                <!-- END :: main Content-->
            </div>
        </div>
        <!-- end:: Body -->
    </div>
    <!-- end:: Page -->


    @include('includes.scripts')

    <script>
        document.querySelector(".selected_person").classList.add('selected_green')

        let search = function(keyword) {
            {{--let token = {{ csrf_token() }}--}}
            console.log(keyword)
            $.ajax({
                url: './stockAllocationSearch/'+keyword,
                type: 'GET'
            }).then(function(response) {
                let list = ""
                response.list.forEach(function (item) {
                    list += item;
                })
                $("#searchResult").html(list)
            }, function(error) {
                if(error.responseJSON.message)
                    $("#searchResult").html("<li class=\"m-nav__item\">" + error.responseJSON.message + "</li>")
            })
        }
    </script>
@endsection