@extends('layouts.master')

@section('content')
    <style>
        .table-set th{font-size: 12px!important; padding: 5px!important}
        .table-set td{font-size: 12px!important; padding: 5px!important}
        .dataTable .btn-default{letter-spacing:1px}
        .form-s2 .select2-container--default .select2-selection--single .select2-selection__rendered{font-size: 13px; line-height: 30px}
        .form-s2 .select2-container .select2-selection--single{height: 30px!important;}
        .form-s2 .select2-container--default .select2-selection--single .select2-selection__arrow{height: 30px;}
        .btn-sm{font-size: 13px; padding: 4px 15px; margin-top: 29px; box-shadow: none}
        .btn-add-all{position: absolute; right: 15px; top: 11px; margin: 0}
        .add-stock-input {
            font-size: 12px;
            width: 80px;
            height: 21px;
            box-shadow: none;
            border-color: #dddddd;
            padding: 0px 5px 0 5px;
        }
    </style>

    <div class="row mt-2 mb-2">
        <div class="col-lg-6 col-md-6 col-sm-6">
            <h2 class="_head01">Stock <span> Transfer</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>Transfer</span></li>
            </ol>
        </div>
    </div>

    <div class="row">
        <div class="col-md-12">
            <div class="card PB-10">
                <div class="row m-0">
                    <div class="col-6 p-0">
                        <div class="header addPR-head">
                            <h2>Current <span>Stock</span></h2>
                        </div>

                        <div class="row m-0">
                            <div class="col-md-4 PT-5 pr-0">
                                <label class="font11 mb-0">Select Region</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" id="current_region_id" onchange="fetchAreasFromRegion(this.value, 'current_area_id')" placeholder="Select Region">
                                        <option value="">Select Region</option>
                                        @foreach($regions as $region)
                                            <option value="{{$region->id}}">{{$region->region_name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 PT-5 pr-0">
                                <label class="font11 mb-0">Select Area</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" id="current_area_id" onchange="fetchTerritoriesFromArea(this.value, 'current_territory_id')" placeholder="Select Area">
                                        <option value="">Select Area</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-4 PT-5">
                                <label class="font11 mb-0">Select Territory</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" id="current_territory_id" onchange="fetchDistributorsFromTerritory(this.value, 'current_distributor_id')" placeholder="Select Territory">
                                        <option value="">Select Territory</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-md-6 PT-5 pr-0">
                                <label class="font11 mb-0">Select Distributor</label>
                                <div class="form-s2">
                                    <select class="form-control formselect" id="current_distributor_id" placeholder="Select Distributor">
                                        <option value="">Select Distributor</option>
                                    </select>
                                </div>
                            </div>
                            <div class="col-auto pr-0">
                                <button type="submit" onclick="loadDistributorStock()" class="btn btn-primary btn-sm">Search</button>
                            </div>
                            <div class="col">
                                <button type="button" onclick="addStock(0,1)" class="btn btn-primary btn-sm btn-line w-100">Transfer ALL</button>
                            </div>
                        </div>

                        <div class="col-12"><hr class="mt-10 mb-10"></div>
                        <div class="col-12 retailerTable PB-10">
                            <table class="table table-hover dt-responsive nowrap table-set" id="current_dist_table" style="width:100%">
                                <thead>
                                <tr>
                                    <th>SKU</th>
                                    <th>Item Name</th>
                                    <th>QTY.</th>
                                    <th>Transfer QTY.</th>
                                    <th>Action</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                    </div>
                    <div class="col-6 p-0">

                        <div class="_selectProList h-100">

                            <div class="header">
                                <h2 class="w-100">New <span> Stock</span></h2>
                            </div>

                            <div class="row m-0 PB-10 mb-10" style="background-color:#fff;">
                                <div class="col-md-4 PT-5 pr-0">
                                    <label class="font11 mb-0">Select Region</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect" id="new_region_id" onchange="fetchAreasFromRegion(this.value, 'new_area_id')"  placeholder="Select Region">
                                            <option value="">Select Region</option>
                                            @foreach($regions as $region)
                                                <option value="{{$region->id}}">{{$region->region_name}}</option>
                                            @endforeach
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 PT-5 pr-0">
                                    <label class="font11 mb-0">Select Area</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect" id="new_area_id" onchange="fetchTerritoriesFromArea(this.value, 'new_territory_id')"  placeholder="Select Area">
                                            <option value="">Select Area</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-4 PT-5">
                                    <label class="font11 mb-0">Select Territory</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect" id="new_territory_id" onchange="fetchDistributorsFromTerritory(this.value, 'new_distributor_id')" placeholder="Select Territory">
                                            <option value="">Select Territory</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-md-6 PT-5 pr-0">
                                    <label class="font11 mb-0">Select Distributor</label>
                                    <div class="form-s2">
                                        <select class="form-control formselect" id="new_distributor_id" placeholder="Select Distributor">
                                            <option value="">Select Distributor</option>
                                        </select>
                                    </div>
                                </div>
                                <div class="col-auto pr-0" style="display: none">
                                    <button type="submit" class="btn btn-primary btn-sm">Search</button>
                                </div>
                                <div class="col">
                                    <button type="button" onclick="revertStock(0,1)" class="btn btn-primary btn-sm btn-line w-100">Revert ALL</button>
                                </div>
                            </div>

                            <div class="col-12 retailerTable PB-10">
                                <table class="table table-hover dt-responsive nowrap table-set" id="new_dist_table" style="width:100%">
                                    <thead>
                                    <tr>
                                        <th>SKU</th>
                                        <th>Item Name</th>
                                        <th>QTY.</th>
                                        <th>Action</th>
                                    </tr>
                                    </thead>
                                    <tbody>

                                    </tbody>
                                </table>

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

                    <div class="col-md-12 text-right PT-15">
                        <button type="submit" onclick="saveTransferStock()" id="save_btn_id" class="btn btn-primary mr-2">Save</button>
                        <button id="pl-close" type="submit" class="btn btn-cancel">Cancel</button>
                    </div>

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

@endsection

@section('scripts')
    <script>
        var current_stock = [];
        var new_stock = [];

        function fetchAreasFromRegion(id, el) {
            http('GET', `/RegionAreas/${id}`).then((e) => {
                $('#'+el).html('');
                $('#'+el).html('<option selected value="">Select Area</option>');

                e.forEach(element => {
                    $('#'+el).append(
                        `<option value="${element.id}">${element.area_name}</option>`);
                });
            });
        }

        function fetchTerritoriesFromArea(id, el) {
            http('GET', `/AreasTerritories/${id}`).then((e) => {
                $('#'+el).html('');
                $('#'+el).html('<option selected value="">Select Territory</option>');

                e.forEach(element => {
                    $('#'+el).append(
                        `<option value="${element.id}">${element.territory_name}</option>`);
                });
            });
        }

        function fetchDistributorsFromTerritory(id, el) {
            http('GET', `/TerritoryDistributors/${id}`).then((e) => {
                $('#'+el).html('');
                $('#'+el).html('<option selected value="">Select Distributor</option>');

                e.forEach(element => {
                    $('#'+el).append(
                        `<option value="${element.id}">${element.distributor_name}</option>`);
                });
            });
        }

        function loadDistributorStock() {
            var region = $('#current_region_id').val();
            var area = $('#current_area_id').val();
            var territory = $('#current_territory_id').val();
            var distributor = $('#current_distributor_id').val();

            if(region != '' && area != '' && territory != '' && distributor != '' ) {
                http('GET', `/distributor-stock/${distributor}`).then((e) => {
                    current_stock = e;
                    addCurrentStockTable();
                });
            }else
                self.notification('error', 'All Fields Required.');
        }

        function addStock(array_id, all=0){

            if(all==0) {
                var filtered = current_stock.filter(function (item) {
                    return item.id == array_id;
                });
                //remove if already exist
                for (var i = 0; i < new_stock.length; i++) {
                    if (new_stock[i].id == array_id) {
                        new_stock.splice(i, 1);
                    }
                }
                //update changeable quantity
                filtered[0].transfer_qty = $('#current_stock_input_id_' + array_id).val();
                new_stock.push(filtered[0]);
            }else{
                new_stock = [];
                for (var i = 0; i < current_stock.length; i++) {

                    current_stock[i].transfer_qty = $('#current_stock_input_id_' + current_stock[i].id).val();
                    new_stock.push(current_stock[i]);
                }
            }
            addNewStockTable();
        }

        function checkQty(qty, id){
            for (var i = 0; i < current_stock.length; i++) {
                if (current_stock[i].id == id) {
                    document.getElementById('current_qty_id_'+id).innerHTML = current_stock[i].qty - qty;
                    if (qty > current_stock[i].qty || qty<0) {
                        $('#current_stock_input_id_'+id).val(0);
                        document.getElementById('current_qty_id_'+id).innerHTML = current_stock[i].qty;
                        self.notification('error', 'Enter Quatity Less Then or Equals to '+current_stock[i].qty);
                        break;
                    }
                }
            }
        }

        function revertStock(array_id, all=0){
            if(all==0) {
                for (var i = 0; i < new_stock.length; i++) {
                    if (new_stock[i].id == array_id) {
                        new_stock.splice(i, 1);
                    }
                }
            }else{
                new_stock  = [];
            }
            addNewStockTable();
        }

        function addCurrentStockTable(){
            var btnText;
                $('#current_dist_table').find('tbody').html('');
            current_stock.forEach(element => {
                var filtered = new_stock.filter(function (item) {
                    return item.id == element.id;
                });

                if(filtered.length>0)
                    btnText = 'Update';
                else
                    btnText = 'Add';

                $('#current_dist_table').find('tbody').append("<tr>\n" +
                    "                                    <td>"+element.sku+"</td>\n" +
                    "                                    <td>"+element.item_name+"</td>\n" +
                    "                                    <td id='current_qty_id_"+element.id+"'>0</td>\n" +
                    "                                    <td><input type='text' value='"+element.qty+"' id='current_stock_input_id_"+element.id+"' oninput='checkQty(this.value, "+element.id+")' class='form-control add-stock-input'></td>\n" +
                    "                                    <td><button class='btn btn-default btn-line mb-0' onclick='addStock("+element.id+")'>"+btnText+"</button></td>\n" +
                    "                                </tr>");
            });
        }

        function addNewStockTable(){
            $('#new_dist_table').find('tbody').html('');
            new_stock.forEach(element => {

                $('#new_dist_table').find('tbody').append("<tr>\n" +
                    "                                    <td>"+element.sku+"</td>\n" +
                    "                                    <td>"+element.item_name+"</td>\n" +
                    "                                    <td>"+element.transfer_qty+"</td>\n" +
                    "                                        <td><button class='btn btn-default mb-0' onclick='revertStock("+element.id+")'>Revert</button></td>\n" +
                    "                                    </tr>");

            });
            addCurrentStockTable();
        }

        function saveTransferStock(){
            for (var i = 0; i < current_stock.length; i++) {
                for (var j = 0; j < new_stock.length; j++) {
                    if (current_stock[i].id == new_stock[j].id) {
                        if (current_stock[i].qty < new_stock[j].transfer_qty) {
                            self.notification('error', 'Enter Value Less Then the Available Quantity!');
                            return;
                        }
                    }
                }
            }

            var distributor_current = $('#current_distributor_id').val();
            var distributor_new = $('#new_distributor_id').val();

            if(distributor_current != '' && distributor_new != '') {
                http('GET', '/save-transfer-stock?current_dist='+distributor_current+'&new_dist='+distributor_new+'&data='+JSON.stringify(new_stock)).then((e) => {
                    if(e==1) {
                        self.notification('success', 'Save Successfully!');
                        new_stock = [];
                        current_stock = [];
                        addNewStockTable();

                    }else
                        self.notification('error', 'Something Went Wrong!');
                });
            }else
                self.notification('error', 'Both Distributors Required.');

        }

        function http(type, url, formData) {
            var self = this;
            return new Promise(function(resolve, reject) {
                $.ajax({
                    headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf_token"]').attr('content')
                    },
                    url: url,
                    type: type,
                    cache: false,
                    contentType: false,
                    processData: false,
                    data: formData,
                    success: function(e) {
                        resolve(e);
                    },
                    error: function(err) {
                        console.log(err);
                        if (err.status == 422 || err.status == 500) {
                            self.notification('error', 'Some Error Occured, please try again.');
                        }
                    }
                });
            });
        }

        function notification(type, message) {
            var bgColor = (type == 'error') ? 'red' : 'green';
            var el = $('#notifDiv');
            el.fadeIn();
            el.css('background', bgColor);
            el.text(message);
            setTimeout(() => {
                el.fadeOut();
            }, 3000);
        }

        $(document).ready(function() {
            $('#new_dist_table, #current_dist_table').DataTable();
        });

    </script>

@endsection