@extends('adminlte::page')
@section('css')
<style>
    .text-right {
        text-align: right !important;
        float: right
    }

    .rebackground {
        background-color: #c9bfbf
    }
</style>
@stop
@section('content')
@include('administrator.inventory.transfer.form-transfer')
<?php Fun::lang() ?>
<div class="page">
    <div class="top-content">
        <div class="row">
            <div class="col-sm-12 col-xs-12">
                <div class="pull-left">
                    <h3>Transfer Stock Inventory</h3>
                </div>
            </div>
        </div>
    </div>
    <div class="row container-fluid">
        <div class="col-sm-12">
            <div class="form-group col-sm-12">
                <div class="col-sm-6">
                    <div class="col-sm-6">
                        <label for="" class="text-right">Category Name</label>
                    </div>
                    <div class="col-sm-6">
                        {!! Form::select('cat_id',$category,null, array('placeholder'=>__('administrator.please_select'),'class' => 'form-control select2 affect-item','id'=>'cat_id')) !!}
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="col-sm-6">
                        <label for="" class="text-right">Project Name</label>
                    </div>
                    <div class="col-sm-6">
                        {!! Form::select('pro_id',$project,null, array('placeholder'=>__('administrator.please_select'),'class' => 'form-control select2 affect-item','id'=>'pro_id')) !!}
                    </div>
                </div>
            </div>
            <div class="form-group col-sm-12">
                <div class="col-sm-6">
                    <div class="col-sm-6">
                        <label for="" class="text-right">Item Group</label>
                    </div>
                    <div class="col-sm-6">
                        {!! Form::select('itmg_id',$groupitem,null, array('placeholder'=>__('administrator.please_select'),'class' => 'form-control select2 groupORzone','id'=>'itmg_id')) !!}
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="col-sm-6">
                        <label for="" class="text-right">Item Zone</label>
                    </div>
                    <div class="col-sm-6">
                        {!! Form::select('zone_id',$zones,null, array('placeholder'=>__('administrator.please_select'),'class' => 'form-control select2 groupORzone','id'=>'zone_id')) !!}
                    </div>
                </div>
            </div>
            <div class="form-group col-sm-12">
                <div class="col-sm-6">
                    <div class="col-sm-6">
                        <label for="" class="text-right">Move From Inventory</label>
                    </div>
                    <div class="col-sm-6">
                        {!! Form::select('inv_from',$invenF,null, array('placeholder'=>__('administrator.main_stock'),'class' => 'form-control select2 groupORzone','required','id'=>'inv_from')) !!}
                    </div>
                </div>
                <div class="col-sm-6">
                    <div class="col-sm-6">
                        <label for="" class="text-right required">Move To Inventory</label>
                    </div>
                    <div class="col-sm-6">
                        {!! Form::select('inv_id',$inventory,null, array('placeholder'=>__('administrator.please_select'),'class' => 'form-control select2','required','id'=>'inv_id')) !!}
                    </div>
                </div>
                <!-- <div class="col-sm-6">
                    <div class="col-sm-6">
                        <label for="" class="text-right">Item</label>
                    </div>
                    <div class="col-sm-6">
                        <select name="item_id" id="item_id" class="form-control select2">

                        </select>
                    </div>
                </div> -->
            </div>
            <div class="form-group col-sm-12">
                <div class="col-sm-6 text-right">
                    <div class="col-sm-6 text-right">
                        <button type="button" class="btn btn-info fa fa-save pull-right btn-move"> Move</button>
                    </div>
                </div>
            </div>
        </div>
        <div class="col-sm-12">
            <div class="col-sm-6">
                <center>
                    <h4 style="border-bottom: 2px solid green;margin-bottom:20px;padding-bottom:10px">Total Available Item: <span id="total_available">{{count($items)}}</span></h4>
                </center>
                <div style="max-height: 500px;overflow:auto">
                    <table>
                        <thead>
                            <tr>
                                <th width="15%">Project</th>
                                <th width="19%">Property Type</th>
                                <th width="10%">Group</th>
                                <th width="10%">Zone</th>
                                <th width="10%">Item</th>
                                <th width="10%">Size</th>
                                <th width="15%">Price</th>
                                <th width="1%"><label class="checkbox-list"><input type="checkbox" id="check_all"><span class="checkmark"></span></label></th>
                            </tr>
                        </thead>
                        <tbody class="append_available">
                            @foreach($items as $i => $item)
                            <tr>
                                <td>{{$item->project}}</td>
                                <td>{{$item->category}}</td>
                                <td>{{$item->group}}</td>
                                <td>{{$item->zone}}</td>
                                <td>{{$item->item_house}}</td>
                                <td>{{$item->item_size_land}} m<sup>2</sup></td>
                                <td>$ {{number_format($item->item_price,2)}}</td>
                                <td><label class="checkbox-list">
                                        <input type="checkbox" class="checkbox" data-id="4" data-name="A04" value="{{$item->id}}">
                                        <span class="checkmark"></span></label></td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
            </div>
            <div class="col-sm-6">
                <center>
                    <h4 style="border-bottom: 2px solid green;margin-bottom:20px;padding-bottom:10px">Total Item Based Inventory: <span id="total_item"></span></h4>
                </center>
                <div class="append_div" style="max-height: 500px;overflow:auto">

                </div>
            </div>
        </div>
    </div>
</div>
@endsection @section('js')
<script type="text/javascript">
    $(document).on('click', '.btn-save', function() {
        var cat = $('#cat_id').find(':selected').val();
        var pro = $('#pro_id').find(':selected').val();
        var itmg = $('#itmg_id').find(':selected').val();
        var item = [];
        $('#item_id option:selected').each(function() {
            item.push($(this).val());
        });
        var inv = $('#inv_id').find(':selected').val();
        var route = "{{route('store-transfer-inventory')}}";
        if (cat == "" && pro == "" && itmg == "" && item == "") {
            alert("Please Select Any Select Box");
        } else if (inv == "") {
            alert("Please Select Inventory");
        } else {
            $.ajax({
                type: "POST",
                dataType: "JSON",
                url: route,
                data: {
                    "_token": "{{ csrf_token() }}",
                    cat: cat,
                    pro: pro,
                    itmg: itmg,
                    item: item,
                    inv: inv
                },
                success: function(data) {
                    window.location.reload();
                }
            });
        }
    });
    $(document).on('click', '.btn-move', function() {
        var itemIds = [];
        var inventory = $('#inv_id').find(':selected').val();
        var inv_name = $('#inv_id').find(':selected').text();
        var text_alert = '';
        $('.checkbox').each(function() {
            if ($(this).is(':checked')) {
                itemIds.push($(this).val());
            }
        });
        var countItem = itemIds.length;
        if (countItem < 1) {
            alert("Please Check Any Item");
        } else {
            if (inventory == "") {
                alert("Please Select Inventory");
            } else {
                text_alert = countItem + " Items Will be Transfered to Inventory " + inv_name;
                $('#itemIDs').val(itemIds);
                $('#invenID').val(inventory);
                $('#text-alert').text(text_alert);
                $('#form-transfer').modal('show');
            }
        }
    });
    $(document).on('change', '.affect-item', function() {
        var cat             = $('#cat_id').find(':selected').val();
        var pro             = $('#pro_id').find(':selected').val();
        var itmg            = $('#itmg_id').find(':selected').val();
        var itmz            = $('#zone_id').find(':selected').val();
        var route           = "{{route('filter-item-by-category')}}";
        var ivf             = $('#inv_from').find(':selected').val();
        var tr              = '';
        var group_option    = '';
        var zone_option     = '';
        var total_available = 0;
        var totalItemEle    = $('.append_available');
        var countItemEle    = $('#total_available');


        $('.append_available').empty();
        $.ajax({
            type: "POST",
            dataType: "JSON",
            url: route,
            data: {
                "_token": "{{ csrf_token() }}",
                cat: cat,
                pro: pro,
                itmg: itmg,
                itmz: itmz,
                ivf:ivf
            },
            success: function(info) {

                var data = info['items'];
                var groups = info['groups'];
                var zones = info['zones'];
                if (data.length == 0) {
                    totalItemEle.append('<tr><td colspan="8" style="text-align:center">.......... No Data ..........</td></tr>');
                } else {
                    $.each(data, function(index, value) {
                        total_available = index + 1;
                        tr += `<tr>
                                        <td>${value.project}</td>
                                        <td>${value.category}</td>
                                        <td>${value.group}</td>
                                        <td>${value.zone}</td>
                                        <td>${value.item_house}</td>
                                        <td>${value.item_size_land} m<sup>2</sup></td>
                                        <td>$ ${parseFloat(value.item_price).toFixed(2)}</td>
                                        <td><label class="checkbox-list">
                                        <input type="checkbox" class="checkbox" data-id="4" data-name="A04" value="${value.id}">
                                        <span class="checkmark"></span></label></td>
                                    </tr>`;
                    });
                    totalItemEle.append(tr);
                }

                $.each(groups, function(i, grps) {
                    group_option += '<option value="' + grps.id + '">' + grps.name + '</option>';
                });
                $.each(zones, function(i, itmzs) {
                    zone_option += '<option value="' + itmzs.id + '">' + itmzs.name + '</option>';
                });
                $('#itmg_id').empty().append('<option value="">Please Select</option>').append(group_option);
                $('#zone_id').empty().append('<option value="">Please Select</option>').append(zone_option);
                countItemEle.text(total_available);
            }
        });
    });
    $(document).on('change', '.groupORzone', function() {
        var grp = $('#itmg_id').find(':selected').val();
        var izn = $('#zone_id').find(':selected').val();
        var cat = $('#cat_id').find(':selected').val();
        var pro = $('#pro_id').find(':selected').val();
        var route = '{{route("filter-item-by-group")}}';
        var tr = '';
        var ivf = $('#inv_from').find(':selected').val();
        var total_available = 0;
        var totalItemEle = $('.append_available');
        var countItemEle = $('#total_available');
        $('.append_available').empty();
        $.ajax({
            url: route,
            type: "POST",
            dataType: "JSON",
            data: {
                "_token": "{{ csrf_token()}}",
                group_id: grp,
                zone_id: izn,
                cat_id: cat,
                pro_id: pro,
                ivf: ivf
            },
            success: function(data) {
                if (data.length == 0) {
                    totalItemEle.append('<tr><td colspan="8" style="text-align:center">.......... No Data ..........</td></tr>');
                } else {
                    $.each(data, function(index, value) {
                        total_available = index + 1;
                        tr += `<tr>
                                <td>${value.project}</td>
                                <td>${value.category}</td>
                                <td>${value.group}</td>
                                <td>${value.zone}</td>
                                <td>${value.item_house}</td>
                                <td>${value.item_size_land} m<sup>2</sup></td>
                                <td>$ ${parseFloat(value.item_price).toFixed(2)}</td>
                                <td><label class="checkbox-list">
                                <input type="checkbox" class="checkbox" data-id="4" data-name="A04" value="${value.id}">
                                <span class="checkmark"></span></label></td>
                            </tr>`;
                    });
                    totalItemEle.append(tr);
                }
                countItemEle.text(total_available);
            }
        });

    });
    $(document).on('change', '#inv_id', function() {
        var id = $(this).find(':selected').val();
        var route = "{{route('filter-item-by-inventory',':id')}}";
        route = route.replace(':id', id);
        var div = '';
        var total_item = 0;
        if (id != "") {
            $.ajax({
                type: "GET",
                dataType: "JSON",
                url: route,
                data: {
                    "_token": "{{ csrf_token() }}"
                },
                success: function(data) {
                    $.each(data, function(index, value) {
                        total_item = index + 1;
                        div += `
                        <div class="col-lg-2 col-md-3 col-sm-4 col-xs-3 col-6 bg pos-item p-5">
                            <div class="thumbnail">
                                <div class="caption">
                                    <center><h4 class="text-danger"><b>${value.item_house}</b></h4>
                                    <p class="text-blue"><b>${parseFloat(value.item_price).toFixed(2)}$</b></p></center>
                                </div>
                            </div>
                        </div>`;
                    });
                    $('#total_item').text(total_item);
                    $('.append_div').empty().append(div);
                }
            });
        }
    });
    $(document).on('change', '#pro_id', function() {
        var pro = $(this).find(':selected').val();
        var cat = $('#cat_id').find(':selected').val();
        var gr = $('#itmg_id').find(':selected').val();
        var zn = $('#zone_id').find(':selected').val();

    });
    $(document).on('change', '#check_all', function() {
        if ($(this).is(":checked")) {
            $('.checkbox').prop('checked', true);
        } else {
            $('.checkbox').prop('checked', false);
        }
    });
</script>
@endsection