@extends('layouts.app_mobile')

@section('link')
    <link href="{{ asset('css/theme.default.css') }}" rel="stylesheet">
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">    
    
    <link href="{{ asset('css/mobile.css') }}" rel="stylesheet">
@endsection

@section('style')
<style>
        
    .chosen-container .chosen-results{
        max-height:200px !important;
    }
    
    .chosen-container .chosen-drop {
        width: 210px !important;
    }
    
    #ui-datepicker-div{
        top: 140px !important; 
        left: 0px !important;
    }
    
    #ui-id-1{
        width:240px !important;
    }
    
    .choose_product{
        background: #e7e7e7;
        width: 100%;
        z-index: 1000;
        position: fixed;
        border:1px solid #000;
        margin-top:5px;
        top: 100px;
        left: 0px;
        display:none;
    }
    
    #page-wrapper{
        scrollbar-width: none;
    }
    
</style>
@endsection

@section('content')
    <div class="gray-bg dashbard-1">
        <div class="row border-bottom">
            <nav class="navbar navbar-static-top" role="navigation" style="margin-bottom: 0">
                <div class="navbar-header" style="width:250px;position: fixed;background:#f3f3f4;">
                    <a class="navbar-minimalize minimalize-styl-2 btn-xs btn-primary" href="{{route('mobile_views.home')}}">{{__('texte.mobile_views_arr.input.menu')}} </a> 
                    <button id="new_barcode_button" type="button" class="minimalize-styl-2 btn btn-primary button-list">{{__('texte.mobile_views_arr.input.scan_code')}}</button> 
                    <button id="beginning_button" type="button" class="minimalize-styl-2 btn btn-primary" style="display:none;">{{__('texte.mobile_views_arr.input.beginning')}}</button> 
                </div>
            </nav>
        </div>
        <div class="row screen-content">                
            <div class="panel panel-default">
                <div class="panel-body">
                    <div id="1">
                        <form id="mobile_input_create" method="POST" action="{{ route('documents.store', $doc_type->id) }}" class="form form-horizontal" novalidate>
                            {{ csrf_field() }}
                            <input type="hidden" name="parent" value="{{ $parent }}" />
                            <input type="hidden" id="doc_type" name="doc_type" value="{{$doc_type->id}}" />
                            <input type="hidden" id="mobile" name="mobile" value="1" />

                            <div class="form-group short">
                            @if ($contragents->isNotEmpty())
                                @permission('document-form-contragent-read')
                                <div class="col-xs-12 col-sm-12 col-md-12 input" style="padding:0px 2px 0px 2px;" {{ $errors->has('contragent') ? ' has-error' : '' }}>
                                    <select class="form-control" id="contragent" name="contragent" required autofocus 
                                        @nonepermission('document-form-contragent-write')
                                            readonly 
                                        @endnonepermission
                                    >
                                    <option value="">{{__('texte.mobile_views_arr.input.contragent')}}</option>
                                        @foreach($contragents as $contragent)
                                        <option value='{{$contragent->id}}' {{isset($docTemp->documentable_id) && $contragent->id==$docTemp->documentable_id ? "selected" : ""}}>{{$contragent->name}} {{isset($contragent->vat) ? ' - '.$contragent->vat : ''}}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('contragent'))
                                        <span class="help-block"><strong>{{ $errors->first('contragent') }}</strong></span>
                                    @endif
                                    <div class="errorBox"></div>
                                </div>                                   
                                @endpermission
                            @endif
                            </div>

                            <div class="form-group short">
                            @permission('document-form-storage-read')
                                <div class="col-xs-12 col-sm-12 col-md-12 input" style="padding:0px 2px 0px 2px;"{{ $errors->has('storage') ? ' has-error' : '' }}>
                                    <select class="form-control" id="storage" name="storage" 
                                        @nonepermission('document-form-storage-write')
                                            readonly 
                                        @endnonepermission
                                    >
                                        @foreach($storages as $storage)
                                        <option value="{{$storage->id}}" {{isset($docTemp->storage_id) && $storage->id==$docTemp->storage_id ? "selected" : ""}}>{{$storage->name}}</option>
                                        @endforeach
                                    </select>
                                    @if ($errors->has('storage'))
                                        <span class="help-block"><strong>{{ $errors->first('storage') }}</strong></span>
                                    @endif
                                    <div class="errorBox"></div>
                                </div>
                            @endpermission
                            </div>

                            <div class="form-group">

                                <div class="col-xs-12 col-sm-12 col-md-12 input" style="padding:0px;">                                        
                                    @permission('document-form-date-read')
                                    <div class='element-holder'>
                                        <input type="text" class="form-control" style="margin-right:10px;width:62%;" id="date" name="date" value="{{ isset($docTemp->date) ? date_format(new DateTime($docTemp->date), 'd.m.Y') : date('d.m.Y') }}" placeholder="{{__('texte.mobile_views_arr.input.date')}}" maxlength="10" required readonly />
                                        @if ($errors->has('date'))
                                            <span class="help-block"><strong>{{ $errors->first('date') }}</strong></span>
                                        @endif
                                        <div class="errorBox"></div>
                                        <button type='button' class='btn btn-sm btn-primary show_note' style="min-height:30px;">{{__('texte.mobile_views_arr.input.note1')}}</button>
                                    </div>
                                    @endpermission

                                    <div id="note" hidden="hidden">
                                        @permission('document-form-note-read')
                                        <div class="input-group col-xs-12 col-sm-12 col-md-12 input" {{ $errors->has('note') ? ' has-error' : '' }} hidden="hidden">
                                            <textarea class="form-control" id="note" name="note" rows="14" placeholder="{{__('texte.mobile_views_arr.input.note')}}" 
                                                @nonepermission('document-form-note-write')
                                                    readonly 
                                                @endnonepermission
                                            >{{ isset($docTemp->note) ? $docTemp->note : ''}}</textarea>
                                            @if ($errors->has('note'))
                                                <span class="help-block"><strong>{{ $errors->first('note') }}</strong></span>
                                            @endif
                                            <div class="errorBox"></div>
                                        </div>
                                        <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                            <button type='button' class='btn btn-primary hide_note' style="width:100%;">{{__('texte.mobile_views_arr.input.done')}}</a>
                                        </div>                                        
                                        @endpermission
                                    </div>
                                </div>
                            </div>

                            @permission('document-form-product-read')
                            <div class="form-group" hidden>
                                <label for="product" class="control-label col-xs-2 col-sm-2 col-md-2">{{__('texte.mobile_views_arr.input.product')}}</label>
                                <div class="input-group col-xs-8 col-sm-8 col-md-8">
                                    <span class="input-group-addon"><i class="glyphicon glyphicon-ice-lolly-tasted"></i></span>
                                    <select class="form-control" id="product" name="product"></select>                                        
                                </div>
                            </div>
                            @endpermission


                            @permission('document-form-stocks-read')
                            <div id="product_list" class="form-group" hidden>
                                <div class="input-group col-xs-12 col-sm-12 col-md-12 input">
                                    <table id="product_stocks" class="table table-bordered table-striped table-hover" style="font-size:10px;">   
                                        <thead>
                                            <th>N</th>
                                            <th>{{__('texte.mobile_views_arr.input.product')}}</th>
                                            <th>{{__('texte.mobile_views_arr.input.count')}}</th>
                                            <th>{{__('texte.mobile_views_arr.input.measure')}}</th>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                    @if ($errors)
                                        <span class="help-block"><strong>{{ $errors->first() }}</strong></span>
                                    @endif
                                    <div class="errorBox"></div>
                                </div>
                            </div>
                            @endpermission


                            @permission('document-form-stocks-read')
                            <div id="wrappage_list" class="form-group" hidden>
                                <div style='margin-bottom:5px;display:flex;'>
                                    <div style='width:95px;margin-right:5px;'>
                                        <select name="pallets" id="pallets">
                                            <option value="">{{__('texte.mobile_views_arr.input.pallets')}}</option>
                                            @foreach($products as $index=>$product)
                                                @if($product->category_id==75)
                                                    <option value="{{$product->id}}" data-i="{{$index}}" >{{$product->name}}</option>
                                                @endif
                                            @endforeach
                                        </select>
                                    </div>
                                    <button type="button" class="btn btn-success" style='font-size:11px;' onclick="calculate_wrappage()">{{__('texte.mobile_views_arr.input.calculate_wrappage')}}</button>
                                </div>
                                <div class="input-group col-xs-12 col-sm-12 col-md-12 input">
                                    <table id="wrappage_stocks" class="table table-bordered table-striped table-hover" style="font-size:10px; table-layout: fixed;">  
                                        <thead>
                                            <th colspan="5">{{__('texte.mobile_views_arr.input.wrappage')}}</th>
                                            <th colspan="4">{{__('texte.mobile_views_arr.input.quantity')}}</th>
                                        </thead>
                                        <tbody>

                                        </tbody>
                                    </table>
                                    @if ($errors)
                                        <span class="help-block"><strong>{{ $errors->first() }}</strong></span>
                                    @endif
                                    <div class="errorBox"></div>
                                </div>
                            </div>
                            @endpermission

                            <div class="form-group">
                                <div class="btn-group btn-group-sm" style='margin:1px 26%;'>
                                    <button type="submit" class="btn btn-primary" style='font-size:11px;' @nonepermission('document-route-create') disabled @endnonepermission>{{__('texte.mobile_views_arr.input.input')}}</button>
                                </div>
                            </div>
                        </form>
                    </div>
                    <div id="2" style="display:none;">
                        <div class="full-width">
                            <div class="col-xs-12 col-sm-12 col-md-12 input" style="padding:0px;" {{ $errors->has('place') ? ' has-error' : '' }}>
                                <h4 style="margin-bottom:5px;">{{__('texte.mobile_views_arr.input.place')}}</h4>
                                <select class="form-control place" id="place" name="place" 
                                    @nonepermission('document-form-place-write')
                                        readonly 
                                    @endnonepermission
                                >
                                    @foreach($places as $place)
                                    <option value="{{$place->id}}" {{isset($docTemp) && count($docTemp->rows)>0 && $place->id==$docTemp->rows[0]->place_id ? "selected" : ""}}>{{$place->address}}</option>
                                    @endforeach
                                </select>
                                @if ($errors->has('place'))
                                    <span class="help-block"><strong>{{ $errors->first('place') }}</strong></span>
                                @endif
                                <div class="errorBox" style="margin-bottom:5px;"></div>
                            </div>
                        </div>

                        <div class="full-width">
                            <h4 style="margin-bottom:5px;">{{__('texte.mobile_views_arr.input.scanned_code')}}</h4>
                            <input type="text" class="full-width" id="barcode" name="barcode" value="" autofocus="autofocus"/>
                            <input type="hidden" id="barcode_scanning" name="barcode_scanning" value="0"/> 
                        </div>  
                        <div class="element_div">
                            <span class="left-element">{{__('texte.mobile_views_arr.input.barcode')}}</span>
                            <input class="right-element" type="text" id="product_barcode" name="product_barcode" value=""/>
                        </div>
                        <div class="element_div">
                            <span class="left-element">{{__('texte.mobile_views_arr.input.batch')}}</span>
                            <input class="right-element" type="text" id="batch" name="batch" value=""/>
                        </div>
                        <div class="element_div">
                            <span class="left-element">{{__('texte.mobile_views_arr.input.expiring_date')}}</span>
                            <input class="right-element" type="text" id="expiry_date" name="expiry_date" value="" style="width:53%" readonly/>
                            <div class="errorDiv" style="margin-left:30%;color: red;" hidden>{{__('texte.mobile_views_arr.input.expired')}}</div>
                        </div>
                        <div class="element_div">
                            <span class="left-element">{{__('texte.mobile_views_arr.input.quantity_short')}}</span>
                            <input class="right-element" type="text" id="quantity" name="quantity" value="" style="width:40%"/>
                            <span class='quantity_measure'></span>
                        </div>
                        <div class="element_div">
                            <span class="left-element">{{__('texte.mobile_views_arr.input.pallet')}}</span>
                            <input class="right-element" type="text" id="pallet" name="pallet" value="" style="width:70%"/>
                        </div>
                        <div class="element_div">
                            <button id="go" type="button" class="btn btn-success">{{__('texte.mobile_views_arr.input.go')}}</button> 
                        </div>
                        
                        <div class="clear-both"></div>
                        
                        <div class="choose_product" style="display:none;">
                            <table id="product_options" class="table table-bordered">
                                <span>Моля изберете продукт</span>
                                <tbody>
                                    
                                </tbody>
                            </table>
                        </div>
                        
                    </div>
                </div>
            </div>            
        </div>
    </div>    

<script src="{{ asset('js/form.map.js') }}"></script>
<script src="{{ asset('js/jquery.tablesorter.min.js') }}"></script>
<script src="{{ asset('js/chosen.js') }}"></script>
<script src="{{ asset('js/chosen-readonly.js') }}"></script>
<script src="{{ asset('js/jquery-ui.min.js') }}"></script>
<script src="{{ asset('js/moment-with-locales.min.js') }}"></script>
<script src="{{ asset('js/datepicker-bg.js') }}"></script>
<script src="{{ asset('js/document.js') }}"></script>
<script src="{{ asset('js/document.mobile_input.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>
<script src="{{ asset('js/BarcodeParser.js') }}"></script> 
<script src="{{ asset('js/jquery.scannerdetection.js') }}"></script>

<script type='text/javascript'>
    $('#contragent,#storage,#place,#pallets').chosen();
    $('.sidebar-collapse').slimscroll();
    $('input#date').datepicker({option: $.datepicker.regional['bg'], maxDate: '+0M +0D'});
    var scroll_offset = 50;
    
    $( "#expiry_date" ).datepicker({
        showOn: "button",
        minDate: '+0M +0D',
        buttonText: '<i class="glyphicon glyphicon-calendar"></i>',
        changeYear: true
    });
    
    $('#pallets').on('change', function(){
       if($(this).val()!=''){
         let i = $(this).children('option:selected').attr('data-i');  
         self.addRow(i);
       } 
    });
    
    
    $(document).ready(function(){
        new Document_MobileInput({!! $products->toJSON() !!}, {!! $intangibles->toJSON() !!}, {!! $stocks->toJSON() !!}, {!! $storages->toJSON() !!}, '{{ old('storage', $storage_id) }}', {!! $places->toJSON() !!}, {!! '"'.$doc_type->title.'"' !!} );
    });
    
    $(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(barcode, qty){ 
                if($('#barcode_scanning').val()==1 && $("#barcode").is(":focus")){
                    read_barcode(barcode); 
                }                    
            } // main callback function	
    });

    $('#barcode').on('input',function(){
        read_barcode($(this).val());
    })
    
    $(document).on('click','.show_note',function(){
       $('#note').show();
       $("html, body").animate({
            scrollTop: $('#note').offset().top-scroll_offset 
       }, 200);
    });
    
    $(document).on('click','.hide_note',function(){
       $('#note').hide();
    });
    
    $('.navbar-minimalize').on('click',function(){
        if($('body').hasClass('body-small')){
            $(".screen-content,.button-document,.button-add,.button-list").toggle();
        }
    });
    
    $('.button-document').on('click', function(){
        $('#product_list').hide();
        $("html, body").animate({
            scrollTop: $('#contragent').offset().top-scroll_offset 
       }, 200);
    });
    
    $('.button-add').on('click', function(){       
        $.ajax({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            },
            url: '/store_temp_stocks',
            type: 'POST',
            data: {data: $("#mobile_input_create").serialize(),},
        });
    });
    
    $('.button-list').on('click', function(){
        $('#product_list').show();
        $("html, body").animate({
            scrollTop: $('#product_stocks').offset().top-scroll_offset 
       }, 200);
    });
    
    $('#new_barcode_button').on('click', function(){
        
        $('#product_stocks').find('.quantity').each(function(){
            if($(this).val()==''){
                $(this).addClass('error').attr('placeholder','Попълни !');
            }
        });
        
        $('#wrappage_stocks').find('.quantity').each(function(){
            if($(this).val()==''){
                $(this).addClass('error').attr('placeholder','Попълни !');
            }
        });
        
        if($('#product_stocks').find('.error').length==0 && $('#wrappage_stocks').find('.error').length==0){ 
            $('#1').hide();
            $('#2').show();         
            $('#2').find('input:text').val(''); 
            $('.quantity_measure').text('');
            $('#barcode').focus();
            $('#barcode_scanning').val(1);
            $.ajax({
                headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                },
                url: '/store_temp_stocks',
                type: 'POST',
                data: {data: $("#mobile_input_create").serialize(),},
            });
            $(this).hide();
            $('#beginning_button').show();
        }
        else{
            if($('#product_stocks').find('.error').length>0){
                var first_error_id = $('#product_stocks').find('.error').first().attr('id').replace('quantity_','');
                $('#list_row_'+first_error_id).next('tr').show();
            }            
        }
    });
    
    $('#beginning_button').on('click', function(){
        $('#1').show();
        $('#2').hide();
        $(this).hide();
        $('#new_barcode_button').show();
    });
    
    $('#expiry_date').on('change', function(){
        var selectedDate = $('#expiry_date').datepicker('getDate');
        var today = new Date();
        today.setHours(0);
        today.setMinutes(0);
        today.setSeconds(0);
        if (Date.parse(today) > Date.parse(selectedDate)) {
          $(this).addClass('error');
          $('.errorDiv').show();
        } else {                  
          $(this).removeClass('error').attr('placeholder','');
          $('.errorDiv').hide();
        }
    });
    
    $('#go').on('click',function(){        
        $('#2').find('.right-element').each(function(){
            if($(this).attr('id')!='barcode' && $(this).attr('id')!='pallet' && $(this).attr('id')!='expiry_date' && $(this).val()==''){
                $(this).addClass('error').attr('placeholder','Попълни !');
            }
            else if($(this).attr('id')!='expiry_date'){
                $(this).removeClass('error').attr('placeholder','');
            }
        });
       
        if($('#2').find('.error').length==0){  
            $('#1').show();
            $('#2').hide();
            $('#barcode_scanning').val(1);
            $('#beginning_button').hide();
            $('#new_barcode_button').show();
            
            $('#product').change();
        }        
        
    });
    
    $('#product_barcode').on('change', function(){        
        if($(this).val()!=''){
            let product = $(this).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){
                                            $('#product').val(response[0].id);   
                                            $('#product_barcode').val(response[0].name);
                                            $('.quantity_measure').text(response[0].measure==1 ? 'брой' : response[0].package_name);
                                        }
                                        else{
                                            $('#product_options tbody tr').remove();
                                            for(var i in response){
                                                var row = "<tr><td data-id='"+response[i].id+"' data-measure='"+(response[i].measure==1 ? 'брой' : response[i].package_name)+"'>"+response[i].name+"</td></tr>";
                                                $('#product_options tbody').append(row);
                                            }
                                            $('.choose_product').show();
                                        }
                                    }
                             }
            });
        }        
    });
    
    $(document).on('click','#product_options tbody tr', function(){
        $('#product').val($(this).find('td').attr('data-id'));
        $('#product_barcode').val($(this).find('td').text());
        $('.quantity_measure').text($(this).find('td').attr('data-measure'));
        $('.choose_product').hide();
    });
    
    $(document).on('click','.list_row',function(){
        $(this).next('tr').toggle();
        $(this).next('tr').find('.pallet').focus();
    })
	
	function read_barcode(barcode){
        try {
                answer = parseBarcode(barcode);
                $.each(answer.parsedCodeItems, function (i) {
                    switch(answer.parsedCodeItems[i].ai){
                        case "01": $('#product_barcode').val(answer.parsedCodeItems[i].data.replace(/^0+/, ''));break;
                        case "02": $('#product_barcode').val(answer.parsedCodeItems[i].data.replace(/^0+/, ''));break;
                        case "10": $('#batch').val(answer.parsedCodeItems[i].data);break;
                        case "15": $('#expiry_date').val(answer.parsedCodeItems[i].data.getDate() +'.'+ (answer.parsedCodeItems[i].data.getMonth()+1) +'.'+ answer.parsedCodeItems[i].data.getFullYear()).change();break;
                        case "37": $('#quantity').val(answer.parsedCodeItems[i].data.replace(/^0+/, ''));break;
                        default: break;    
                    }
                });
                $('#product_barcode').change();
                $('#barcode').val('').focus();                
        } catch (e) {
            $('#barcode').val('');
        }
    }
    
    
    function calculate_wrappage(){
        $('.is_wrappage[value!=0]').each(function(){
            $(this).closest('tr').find('.quantity').val('0');
        });

        $('.is_wrappage[value=0]').each(function(){
            var stock = $(this).closest('tr').find('.quantity').attr('id').replace("quantity_", "");
            var quantity = $('#measure_'+stock).val()==1 ? $('#quantity_'+stock).val() : ($('#measure_'+stock).val()==0 ? $('#quantity_'+stock).val()*$('input[name="stocks['+stock+'][wrappage_package_id]"]').attr('data-quantity') : $('#quantity_'+stock).val()*$('input[name="stocks['+stock+'][wrappage_pallet_id]"]').attr('data-quantity'));
            $('.product[value="'+$(this).closest('tr').find('.wrappage_piece_id').val()+'"]').closest('tr').find('.quantity').val(parseFloat($('.product[value="'+$(this).closest('tr').find('.wrappage_piece_id').val()+'"]').closest('tr').find('.quantity').val())+ parseFloat(quantity)).change();
            $('.product[value="'+$(this).closest('tr').find('.wrappage_package_id').val()+'"]').closest('tr').find('.quantity').val(Math.floor(parseFloat($('.product[value="'+$(this).closest('tr').find('.wrappage_package_id').val()+'"]').closest('tr').find('.quantity').val())+ parseFloat(quantity/$('input[name="stocks['+stock+'][wrappage_package_id]"]').attr('data-quantity')))).change();
            $('.product[value="'+$(this).closest('tr').find('.wrappage_pallet_id').val()+'"]').closest('tr').find('.quantity').val(Math.floor(parseFloat($('.product[value="'+$(this).closest('tr').find('.wrappage_pallet_id').val()+'"]').closest('tr').find('.quantity').val())+ parseFloat(quantity/$('input[name="stocks['+stock+'][wrappage_pallet_id]"]').attr('data-quantity')))).change();

        });
    }
    
    $(document).ready(function() {
        $(window).keydown(function(event){
            if(event.keyCode == 13) {
                event.preventDefault();
                return false;
            }
        });
    });
    
    $(document).on("input", "#quantity,.quantity", function() {
        this.value = this.value.replace(/\D/g,'');
    });
    
    $(document).on('change','#pallet', function(){
        if($(this).val()!=''){
            var pallet = $(this).val();
            $.ajax({
                    headers: {
                            'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                            },
                            url: '/check_pallet_barcode',
                            type: 'POST',
                    data: { 'pallet' : pallet},
                    async:false,
                    success: function(response){
                                if(response.length>0){
                                    alert('Вече има палет с такъв баркод.');
                                    $('#pallet').val('');
                                }
                            }
            });
        }
    });
</script>
@endsection