@extends('layouts.master')
@section('content')

    <style>
        ._PR_filter{margin-top: -2px; width:220px!important; float: left}
        ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered {line-height: 30px!important; font-family: 'proximanova-light', sans-serif!important; font-size: 13px!important;}
        ._PR_filter .form-s2 .select2-container .select2-selection--single, ._PR_filter .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow{height: 31px!important;}
        .addPR-head h3{font-size: 13px; padding-right: 10px; line-height: 2; letter-spacing:0; margin: 0}
        .topstats{margin-top: 5px; font-size: 14px;}
        .topstats .gary-box{line-height: 1;background-color: #f9f9f9;border-bottom: solid 1px #d1d1d1;padding: 10px;letter-spacing: 1px;}
        .topstats .gary-box span{font-family: 'Rationale', sans-serif; color:#0038ba; font-size: 22px; float: right; margin-top: -4px;}
        .qty-units{margin:10px 0 0 0; letter-spacing: 1px;}
        .qty-units .col{background-color: #f6f6f6; border: solid 1px #fff; text-align: center; padding: 5px; line-height:1; font-size: 13px;}
        @media (max-width: 1280px) {
            ._PR_filter{ width:200px!important; }
        }

    </style>

    <div class="modal fade" id="stockHistoryModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
        <div class="modal-dialog modal-dialog-centered modal-lg" role="document">
            <div class="modal-content  top_border">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">History List<span></span></h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close"> <span aria-hidden="true">&times;</span> </button>
                </div>
                <div class="modal-body">
                    <div class="row">
                        <div class="col-12">

                            <table class="table table-hover dt-responsive nowrap stockhistory " id="stockhistory" style="width:100%">
                                <thead>
                                <tr>
                                    <th>SKU</th>
                                    <th>ITEM</th>
                                    <th>STOCK</th>
                                    <th>STATE</th>
                                    <th>LAST UPDATED ON</th>
                                    <th>ADDED BY</th>
                                </tr>
                                </thead>
                                <tbody class="stock_history_list">
{{--                                <tr>--}}
{{--                                    <td>545</td>--}}
{{--                                    <td>All Rounder Rs.5 (24 Pcs/Box)</td>--}}
{{--                                    <td>250</td>--}}
{{--                                    <td>Opening Stock </td>--}}
{{--                                    <td>2020-07-28 13:30:16</td>--}}
{{--                                    <td>sikandar.memon</td>--}}
{{--                                </tr>--}}


                                </tbody>
                            </table>

                        </div>

                    </div>
                </div>
                <div class="modal-footer border-0" style="background-color: #f6f6f6">
                    <button type="submit" class="btn btn-cancel" data-dismiss="modal" aria-label="Close">Close</button>
                </div>
            </div>
        </div>
    </div>

    <div class="row mt-2 mb-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Current <span> Stock</span></h2>
        </div>

        <div class="col-lg-6 col-md-6 col-sm-6">
            <ol class="breadcrumb">
                <li><a href="#"><span>Stock</span></a></li>
                <li><span>Management</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card">

                <div class="header addPR-head mb-10">

                    <div class="float-left"><h3>Region</h3></div>
                    <div class="_PR_filter pr-10">
                        <div class="form-s2">
                            <select class="form-control formselect" placeholder="Select Region" id="region_id" onchange="fetchAllRegionAreas(this.value)" style="width: 100%!important">
                                <option value="0" selected=""> Select Region</option>
                                @foreach($regions as $row)
                                <option value="{{$row->id}}">{{$row->region_name}}</option>
                                @endforeach
                            </select>
                        </div>
                    </div>

                    <div class="float-left"><h3>Area</h3></div>
                    <div class="_PR_filter pr-10">
                        <div class="form-s2">
                            <select class="form-control formselect" placeholder="Select Area" id="area_id" onchange="fetchAllAreaTerritories(this.value)" style="width: 100%!important">
                                <option value="" selected=""> Select Area/Zone</option>
                            </select>
                        </div>
                    </div>

                    <div class="float-left"><h3>Territory</h3></div>
                    <div class="_PR_filter pr-10">
                        <div class="form-s2">
                            <select class="form-control formselect" placeholder="Select Territory" id="territory_id" onchange="fetchAllTerritoryDistributors(this.value)" style="width: 100%!important">
                                <option value="" selected=""> Select Territory</option>
                            </select>
                        </div>
                    </div>

                    <div class="float-left"><h3>Distributor</h3></div>
                    <div class="_PR_filter">
                        <div class="form-s2">
                            <select class="form-control formselect" placeholder="Select  Distributor" onchange="fetchCurrentStock(this.value)" id="distributor_id" style="width: 100%!important">
                                <option value="" selected=""> Select Distributor</option>
                            </select>
                        </div>
                    </div>
                </div>

                <div class="col-12 p-0">
                    <div class="topstats">
                        <div class="row m-0">
                            <div class="col-4"><div class="gary-box"><strong>Total Products:</strong> <span class="total_product">0</span></div></div>
                            <div class="col-4"><div class="gary-box"><strong>Stock Value:</strong> <span class="stock_value" >0</span></div></div>
                            <div class="col-4"><div class="gary-box"><strong>Available Stock</strong> <span class="available_stock" >0</span></div></div>
                        </div>

                    </div>
                </div>


                <div class="body">
                    <table class="table table-hover dt-responsive nowrap DistributorsCurentStock" id="exampleddd" style="width:100%">
                        <thead>
                        <tr>
                            <th>SKU</th>
                            <th>ITEM NAME</th>
                            <th>BRAND</th>
                            <th>AVAILABLE QTY.</th>
                            <th>STOCK VALUE</th>
                            <th>Action</th>
                        </tr>
                        </thead>
                        <tbody class="distributor_stock">
{{--                            <tr>--}}
{{--                                <td>2125</td>--}}
{{--                                <td>All Rounder Rs.5 (24 Pcs/Box)</td>--}}
{{--                                <td>Brand NAme </td>--}}
{{--                                <td>542</td>--}}
{{--                                <td>654</td>--}}
{{--                            </tr>--}}
                        </tbody>
                    </table>
                </div>


            </div>
        </div>
    </div>
@endsection
@push('scripts')
    <script src="/js/list.min.js"></script>

@endpush