@extends('layouts.app_mobile')

@section('link')
    <link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
    
    <link href="{{ asset('css/mobile.css') }}" rel="stylesheet">
@endsection

@section('style')
<style>
    .panel-heading{
        margin-bottom:10px;
    }
    .input-group{
        float:left !important;
        margin:0px 2px 5px;
    }
    
    .select2-selection{
        height:34px !important;
    }
    
    #repackaging_create .form-control{
        height:25px;
    }
  
     
    #repackaging_create .form-group{
        margin-bottom: 2px;
        margin-left:0px !important;
        margin-rigth:0px !important;
        float:left;
        width:50%;
    }  
    
    input, label {
        display:block;
        padding-left:5px !important;
    }
    
    .form-horizontal .control-label {
        padding-top: 2px;
        margin-bottom: 0;
        text-align: left;
    }
    
    .col-md-10 {
        width: 87.333%;
    }
    
    .errorBox{
        max-height:38px;
        overflow:hidden;
    }
    
    .pallet_error{
        background: #e7e7e7;
        width: 75%;
        z-index: 1000;
        position: fixed;
        height: 100px;
        margin-left: 10%;
        text-align: center;
        border:1px solid #000;
        margin-top:5px;
        display:none;
    }
    
    .choose_product{
        background: #e7e7e7;
        width: 100%;
        z-index: 1000;
        position: fixed;
        border:1px solid #000;
        margin-top:5px;
        display:none;
    }
    
    .reference_choose_product{
        background: #e7e7e7;
        width: 100%;
        z-index: 1000;
        position: fixed;
        border:1px solid #000;
        margin-top:5px;
        display:none;
        top:100px;
    }
    
    .pallet_error span{
        position: relative;
        top: 35%;
    }
    
</style>
@endsection

@section('content')
<div class="gray-bg dashbard-1">
@include('shared.messages')
    <div class="form-group">
        <div class="col-sm-15" style="text-align: center;">
             <a type="button" class="btn btn-primary" href="{{ route('mobile_views.home') }}">{{__('texte.mobile_views_arr.repackaging.menu')}} </a> 
             <a id="repackaging" class="btn btn-primary" style="display:none">{{__('texte.mobile_views_arr.repackaging.repackaging')}}</a>
             <a id="reference" class="btn btn-primary">{{__('texte.mobile_views_arr.repackaging.reference')}}</a>                
             <a id="forklift_unlocks" href="{{route('forklift.index_unlocks')}}" class="btn {{count($forklift_unlocks)>0 ? 'btn-danger': 'btn-primary'}}">{{__('texte.mobile_views_arr.repackaging.unlocks')}}</a>
         </div>
    </div>
    <div class="row screen-content"> 
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{__('texte.mobile_views_arr.repackaging.repackaging')}} </h3>
            </div>
            <div class="panel-body" style="padding:0px;">
                <div id="1">
                    <div class="col-xs-15 col-sm-15 col-md-15">
                        <form method="POST" action="{{route('repackaging.create')}}" id="repackaging_create" role="form" class="form-horizontal">
                            {{ csrf_field() }}
                            <div class="errorBox"></div>
                            <div class="form-group">
                                <label for="place" class="control-label col-xs-10 col-sm-10 col-md-10">{{__('texte.mobile_views_arr.repackaging.address')}}</label>
                                <div class="input-group col-xs-10 col-sm-10 col-md-10">
                                    <input class="form-control place" name="place" id="place" type="text" placeholder="{{__('texte.mobile_views_arr.repackaging.address')}}" value="{{old('place')}}" style="width:100%" required/>
                                    <div class="errorBox1"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="pallet" class="control-label col-xs-10 col-sm-10 col-md-10">{{__('texte.mobile_views_arr.repackaging.pallet')}}</label>
                                <div class="input-group col-xs-10 col-sm-10 col-md-10">
                                    <input type="text" name="pallet" class="form-control pallet" id="pallet" value="{{old('pallet')}}"  placeholder="{{__('texte.mobile_views_arr.repackaging.pallet_barcode')}}"  style="width:100%"/>
                                </div>
                            </div>
                            <div class="clear-both"></div>
                            <div class="form-group">
                                <label for="product" class="control-label col-xs-10 col-sm-10 col-md-10">{{__('texte.mobile_views_arr.repackaging.product')}}</label>
                                <div class="input-group col-xs-10 col-sm-10 col-md-10">
                                    <input type="text" name="product" class="form-control product" id="search_product" value="{{old('product')}}"  placeholder="{{__('texte.mobile_views_arr.repackaging.product')}}"  style="width:100%" required/>
                                    <div class="errorBox1"></div>
                                </div>
                            </div>

                            <div class="form-group">
                                <label for="batch" class="control-label col-xs-10 col-sm-10 col-md-10">{{__('texte.mobile_views_arr.repackaging.batch')}}</label>
                                <div class="input-group col-xs-10 col-sm-10 col-md-10">
                                    <input class="form-control batch" name="batch" id="batch" type="text" placeholder="{{__('texte.mobile_views_arr.repackaging.batch')}}" value="{{old('batch')}}" style="width:100%" required readonly/>
                                    <div class="errorBox1"></div>
                                </div>
                            </div>

                            <div class="clear-both"></div>

                            <div class="form-group" style="width:100%" hidden>
                                <label for="product_name" class="control-label col-xs-10 col-sm-10 col-md-10"></label>
                                <div class="input-group col-xs-10 col-sm-10 col-md-10">
                                    <input type="text" name="product_name" class="form-control product" id="product_name" value="" style="width:100%" disabled/>
                                </div>
                            </div>
                            <div class="clear-both"></div>
                            <div class="form-group">
                                <label for="quantity" class="control-label col-xs-10 col-sm-10 col-md-10">{{__('texte.mobile_views_arr.repackaging.quantity')}}</label>
                                <div class="input-group col-xs-10 col-sm-10 col-md-10">
                                    <input class="form-control quantity" name="quantity" id="quantity" type="text" placeholder="{{__('texte.mobile_views_arr.repackaging.quantity')}}" value="{{old('quantity')}}" style="width:100%" min="1" required/>
                                    <div class="errorBox1"></div>
                                </div>                            
                            </div>


                            <div class="form-group">
                                <label for="new_pallet" class="control-label col-xs-10 col-sm-10 col-md-10">{{__('texte.mobile_views_arr.repackaging.new_pallet')}}</label>
                                <div class="input-group col-xs-10 col-sm-10 col-md-10">
                                    <input type="text" name="new_pallet" class="form-control new_pallet" id="new_pallet" value="{{old('new_pallet')}}"  placeholder="{{__('texte.mobile_views_arr.repackaging.new_pallet')}}"  style="width:100%" />
                                </div>
                            </div>
                            <div class="clear-both"></div>
                            <div class="form-group">
                                <label for="new_place" class="control-label col-xs-10 col-sm-10 col-md-10">{{__('texte.mobile_views_arr.repackaging.new_place')}}</label>
                                <div class="input-group col-xs-10 col-sm-10 col-md-10">
                                    <input class="form-control place" name="new_place" id="new_place" type="text" placeholder="{{__('texte.mobile_views_arr.repackaging.new_place')}}" value="{{old('new_place')}}" style="width:100%" required/>
                                    <div class="errorBox1"></div>
                                </div>
                            </div>
                            <div class="clear-both"></div>
                            <div class="pallet_error">
                                <button type="button" class="close" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                                <span>Не е намерен палет с такъв баркод</span>
                            </div>

                            <div class="choose_product">
                                <table id="product_options" class="table table-bordered">
                                    <span>Моля изберете продукт</span>
                                    <tbody>

                                    </tbody>
                                </table>
                            </div>
                            <div class="form-group" style="width:100%">   
                                <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                    <table id="batches" class="table table-bordered" style="margin-top:10px;">
                                        <thead>
                                            <th>{{__('texte.mobile_views_arr.repackaging.batch')}}</th>
                                            <th>{{__('texte.mobile_views_arr.repackaging.quantity_short')}}</th>
                                        </thead>
                                        <tbody>

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


                            <div class="form-group" style="width:100%">
                                <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                    <button type="submit" class="btn btn-success submit">{{__('texte.mobile_views_arr.repackaging.done')}}</button>
                                    @if(config('settings.has_barcode_scanner'))
                                    <button type="button" class="btn btn-info" id="scan_barcode" onclick="scanBarcode()" style='margin-left:5px;'>Scan</button>
                                    @endif
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
                <div id="2" hidden>
                    <div class="col-xs-15 col-sm-15 col-md-15">
                            <div class="form-group">
                                <div class="input-group col-xs-6 col-sm-6 col-md-6">
                                    <select name="storage" id="storage">
                                        <option value="">{{__('texte.mobile_views_arr.repackaging.storage')}}</option>
                                        @foreach($storages as $storage)
                                            <option value="{{$storage->id}}">{{$storage->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                                <div class="input-group col-xs-5 col-sm-5 col-md-5">
                                    <input class="form-control" style="width:calc(100% - 4px);" name="address" id="address" type="text" placeholder="{{__('texte.mobile_views_arr.repackaging.place_barcode')}}" value=""/>                                
                                </div>                             
                            </div>                                          
                            <div class="form-group">
                                <div class="input-group col-xs-11 col-sm-11 col-md-11">
                                    <select name="product" id="product">
                                        <option value="">{{__('texte.mobile_views_arr.repackaging.product')}}</option>
                                        @foreach($products as $product)
                                            <option value="{{$product->id}}">{{$product->name}}</option>
                                        @endforeach
                                    </select>
                                </div>
                            </div>   
                            <div class="form-group">    
                                <div class="input-group col-xs-11 col-sm-11 col-md-11">
                                    <input class="form-control" name="product_barcode" id="product_barcode" type="text" style="margin-bottom:4px;" placeholder="{{__('texte.mobile_views_arr.repackaging.product_barcode')}}" value=""/>                                
                                </div>  
                            </div>
                            <div class="form-group">    
                                <div class="input-group col-xs-6 col-sm-6 col-md-6">
                                    <input class="form-control" name="pallet_barcode" id="pallet_barcode" type="text" style="min-width:111px;" placeholder="{{__('texte.mobile_views_arr.repackaging.pallet_barcode')}}" value=""/>                                
                                </div>  
                                <div class="input-group col-xs-5 col-sm-5 col-md-5">                                    
                                    <button id="search" type="button" class="btn btn-success" >{{__('texte.mobile_views_arr.repackaging.search')}}</button>
                                    @if(config('settings.has_barcode_scanner'))
                                    <button type="button" class="btn btn-info" id="scan_barcode" onclick="scanBarcode()" style="margin-left:5px;">Scan</button>
                                    @endif
                                </div>
                            </div>

                            <div class="form-group">   
                                <div style="width:95%;overflow: scroll;max-height:200px;">
                                    <table id="stocks" class="table table-bordered" style="margin-top:10px;">
                                        <thead>
                                            <th>{{__('texte.mobile_views_arr.repackaging.address')}}</th>
                                            <th>{{__('texte.mobile_views_arr.repackaging.product')}}</th>
                                            <th>{{__('texte.mobile_views_arr.repackaging.batch')}}</th>
                                            <th>{{__('texte.mobile_views_arr.repackaging.quantity_short2')}}</th>
                                            <th>{{__('texte.mobile_views_arr.repackaging.pallet')}}</th>
                                        </thead>
                                        <tbody>

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

                            <div class="clear-both"></div>

                            <div class="reference_choose_product">
                                <table id="reference_product_options" class="table table-bordered">
                                    <span>Моля изберете продукт</span>
                                    <tbody>

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

<script src="{{ asset('js/select2.min.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>
<script src="{{ asset('js/jquery.scannerdetection.js') }}"></script>
<script type="text/javascript">
    
    var previous_focus;
    
    if(is_barcode_scanner==0){
        $('#place').focus();
    }
                
    previous_focus = 'place';
    
    $(document).scannerDetection({
            timeBeforeScanTest: 200, // wait for the next character for upto 200ms
            startChar: [120], // Prefix character for the cabled scanner (OPL6845R)
            endChar: [13], // be sure the scan is complete if key 13 (enter) is detected
            avgTimeByChar: 40, // it's not a barcode if a character takes longer than 40ms
            onComplete: function(){ 
                var element = $(document.activeElement);

                element.change();
            } // main callback function	
    });
    
    $('#storage,#product').select2();
    
    $('#place').on('change',function(){
        setTimeout(function(){
            if(is_barcode_scanner==0){
                $("#pallet").focus();
            }
            else{
                previous_focus = 'pallet';
            }
       });
    });
    
    $('#quantity').on('change',function(){
        setTimeout(function(){
            if(is_barcode_scanner==0){
                $("#new_pallet").focus();
            }
            else{
                previous_focus = 'new_pallet';
            }
       });
    });
    
    $('#new_pallet').on('change',function(){
        setTimeout(function(){
            if(is_barcode_scanner==0){
                $("#new_place").focus();
            }
            else{
                previous_focus = 'new_place';
            }
       });
    });
    
    $('#reference').on('click',function(){
       $(this).hide(); 
       $('#1').hide();
       $('#repackaging').show();
       $('.panel-title').html('Справка');
       $('#2').show();
       setTimeout(function(){
            if(is_barcode_scanner==0){
                $("#address").focus();
            }
            else{
                previous_focus = 'address';
            }
       });
    });
    
    $('#repackaging').on('click',function(){
       $(this).hide(); 
       $('#2').hide();
       $('.panel-title').html('Заключване');
       $('#reference').show();
       $('#1').show();
       
       setTimeout(function(){
            if(is_barcode_scanner==0){
                $("#place").focus();
            }
            else{
                previous_focus = 'place';
            }
       });
    });
    
    
    $('#pallet').on('change', function(){
        if($(this).val()!=''){
            let pallet = $(this).val();
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/find_pallet_place',
                        type: 'POST',
                data: { 'pallet' : pallet},
                success: function(response){
                            if(response.warning){
                                $('.pallet_error').show();
                                setTimeout(function(){
                                    if(is_barcode_scanner==0){
                                        $("#pallet").focus();
                                    }
                                    else{
                                        previous_focus = 'pallet';
                                    }
                               });
                            }
                            else{
                                $('#place').val(response);    
                                setTimeout(function(){
                                    if(is_barcode_scanner==0){
                                        $("#search_product").focus();
                                    }
                                    else{
                                        previous_focus = 'search_product';
                                    }
                                });
                            }
                         }
                });
        }
    });
    
    
    $('#search_product').on('change', function(){
        if($(this).val()!=''){
            let pallet = $('#pallet').val();
            let product = $(this).val();
            let address = $('#place').val();
            
            $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/find_products',
                            type: 'POST',
                    data: { 'product' : product},
                    success: function(response){
                        if(response.length==0){
                            alert('Не са намерени продукти');
                            $('#product').val('');
                        }
                        else{
                            if(response.length==1){
                                $('#search_product').val(response[0].id);                            
                                find_product_stocks(pallet,response[0].id,address);
                            }
                            else{
                                $('#product_options tbody tr').remove();
                                for(var i in response){
                                    var row = "<tr><td data-id='"+response[i].id+"'>"+response[i].name+"</td></tr>";
                                    $('#product_options tbody').append(row);
                                }
                                $('.choose_product').show();
                            }
                        }
                    }
            });

        }
        else{
            $('#product_name').closest('.form-group').hide();
            $('#product_name').val('');
            $('#batches tbody tr').remove();            
            $('#batch').val('');
            $('#quantity').val('');
        }
    });
    
    $(document).on('click','#product_options tbody tr', function(){
        let pallet = $('#pallet').val();
        let product = $(this).find('td').attr('data-id');
        let address = $('#place').val(); 
        $('.choose_product').hide();
        
        $('#search_product').val($(this).find('td').attr('data-id'));                            
        find_product_stocks(pallet,product,address);
    });
    
    
    $('#product_barcode').on('change', function(){
        let product_barcode = $('#product_barcode').val();
        
        if(product_barcode!=''){
            $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/find_products',
                            type: 'POST',
                    data: { 
                            'product' : product_barcode},
                    success: function(response){
                                if(response.length==0){
                                    alert('Не са намерени продукти');
                                    $('#product').val('').trigger('change');
                                }
                                else{
                                    if(response.length==1){
                                        $('#product').val(response[0].id).trigger('change');
                                    }
                                    else{
                                        $('#reference_product_options tbody tr').remove();
                                        for(var i in response){
                                            var row = "<tr><td data-id='"+response[i].id+"'>"+response[i].name+"</td></tr>";
                                            $('#reference_product_options tbody').append(row);
                                        }
                                        $('.reference_choose_product').show();
                                    }
                                }
                             }
            });
        }
        else{
            $('#product').val('').trigger('change');
        }
    });
    
    $(document).on('click','#reference_product_options tbody tr', function(){
        $('#product').val($(this).find('td').attr('data-id')).trigger('change');  
        $('.reference_choose_product').hide();
    });
    
    $(document).on('click','#batches tr',function(){
        if(!$(this).hasClass('unclickable')){
            $('#batch').val($(this).find('td:first-child').text());
            $('#quantity').val($(this).find('td:eq(1)').text()).attr('max',$(this).find('td:eq(1)').text());
            setTimeout(function(){
                $("#quantity").focus();
                 previous_focus = 'quantity';
            });   
        }
    });
    
    $('#search').on('click', function(){
        let storage = $('#storage').val();
        let address = $('#address').val();
        let product = $('#product').val();
        let pallet = $('#pallet').val();
        
        $('#stocks tbody tr').remove();
        
        if(storage!='' || address!='' || product!='' || pallet!=''){
            $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/find_stocks',
                            type: 'POST',
                    data: { 'storage' : storage,
                            'address' : address,
                            'product' : product,
                            'pallet' : pallet},
                    success: function(response){
                                    for(let i in response){
                                        let row = "<tr><td>"+response[i].barcode+"</td><td>"+response[i].name+"</td><td>"+(response[i].batch!=null ? response[i].batch : '')+"</td><td>"+response[i].quantity+"</td><td>"+(response[i].pallet!=null && response[i].pallet!=0 ? response[i].pallet : '')+"</td></tr>";
                                        $('#stocks tbody').append(row);
                                    }      
                             }
                });
        }
    });
    
    $(document).ready(function(){
        setInterval(function() {
            get_unfinished_unlocks();
        }, 30000);      
    });
    
    var done_get_unfinished_unlocks=1;
    
    function get_unfinished_unlocks(){
        if(done_get_unfinished_unlocks==1){            
            done_get_unfinished_unlocks=0;
            
            $.ajax({
                headers: {
                        'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                        },
                        url: '/get_unfinished_unlocks',
                        type: 'POST',

                success: function(response){
                            if(response.warning){
                                alert(response.warning);
                            }
                            else{
                               if(response==0){
                                   $('#forklift_unlocks').addClass('btn-primary').removeClass('btn-danger');
                               }
                               else{
                                   $('#forklift_unlocks').removeClass('btn-primary').addClass('btn-danger');
                               }
                            }
                            done_get_unfinished_unlocks=1;
                        }
            });
        }
    }
    
    $('.close').on('click',function(){
       $('.pallet_error').hide(); 
    });
    
    function find_product_stocks(pallet,product,address){
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/find_stocks',
                    type: 'POST',
                    async: false,
            data: { 'pallet' : pallet,
                    'product' : product,
                    'address' : address,},
            success: function(response){
                            $('#batches tbody tr').remove();
                            $('#batch').val('');
                            $('#quantity').val('');

                            if(response.length>0){
                                $('#product_name').val(response[0].name);
                                $('#product_name').closest('.form-group').show();
                                for(let i in response){
                                    let row = "<tr "+ (response[i].expedition_id!=0 || response[i].stock_transfer_row_id!=0 ? "class='unclickable' style='color:red'" : "") +"><td>"+response[i].batch+"</td><td>"+response[i].quantity+"</td></tr>";
                                    $('#batches tbody').append(row);                                            
                                }    
                                if(response.length==1){
                                    $('#batches tbody tr:first').click();
                                }
                            }
                            else{
                                $('#product_name').closest('.form-group').hide();
                                $('#product_name').val('');
                                $('#batches tbody').append("<tr><td colspan='3'>Липсва наличност</td></tr>");
                            }                                    
                     }
        });
    }
    
    $("input" ).on('focus',function() {
        previous_focus = $(this).attr('id');
    });
    
    function getBarcodeValue(result) {
        $('#'+previous_focus).val(result).change();
    }; 
        
</script>
@endsection