@extends('layouts.app_mobile')

@section('link')
    <link href="{{ asset('css/chosen.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/datatables.min.css') }}" rel="stylesheet">
    <link href="{{ asset('css/jquery-ui.min.css') }}" rel="stylesheet">  
    <link href="{{ asset('css/style.css') }}" rel="stylesheet">
    
    <link href="{{ asset('css/admin_filters.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;
    }
    .chosen-container-single .chosen-single {
        line-height: 28px;
        border-radius: 0px;
    }
    
    .chosen-container .chosen-drop {
        width:100% !important;
    }
    
    .chosen-container{
        min-height: 22px;
    }
    
    #new_supply_btn{
        margin-left:19px;
    }
  
    .form-group span{
        font-size:10px;
    }
    
    .control-label{
        font-size:10px;
    }
    
   
    .form-horizontal .control-label {
        padding-top: 2px;
        margin-bottom: 0;
        text-align: left;
    }
    
    .errorBox{
        font-size:10px;
        max-height:38px;
        overflow:hidden;
    }
    
    .choose_product{
        background: #e7e7e7;
        width: 100%;
        z-index: 9999;
        position: fixed;
        top:80px;
        border:1px solid #000;
        margin-top:5px;
        display:none;
    }
    
</style>
@endsection

@section('content')
<div class="gray-bg dashbard-1">
@include('shared.messages')
    <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.place_problems.menu')}} </a> 
                <a id="place_problems" class="navbar-minimalize minimalize-styl-2 btn-xs btn-primary" hidden>{{__('texte.mobile_views_arr.place_problems.place_problems')}}</a>
                <a id="reference" class="navbar-minimalize minimalize-styl-2 btn-xs btn-primary">{{__('texte.mobile_views_arr.place_problems.reference')}}</a>       
            </div>
        </nav>
    </div>
    <div class="row screen-content"> 
        <div class="panel panel-default">
            <div class="panel-heading">
                <h3 class="panel-title">{{__('texte.mobile_views_arr.place_problems.place_problems')}}</h3>
            </div>
            <div id='1'>
                <div id="number_1">
                    <div class="form-group">
                        <div style="width:250px;overflow: scroll;max-height:200px;">
                            <table class="table table-striped table-bordered table-hover dataTables-example dataTable" style="font-size:10px;margin-top:10px;">
                                <thead>
                                    <tr>
                                        <th data-sorter="false" style="text-align:right;">{{__('texte.mobile_views_arr.place_problems.actions')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.place')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.product')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.batch')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.quantity')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.measure')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.pallet')}}</th>
                                    </tr>
                                </thead>
                                <tbody>
                                @foreach ($place_problems as $place_problem)
                                    @if(isset($place_problem->stock))
                                    <tr>
                                        <td>
                                            <div class='btn-group btn-group-xs' style='float:right;'>                                        
                                                <button type="button" class="btn btn-warning inspect" data-id="{{$place_problem->id}}" data-stock="{{$place_problem->stock_id}}" title="{{ $place_problem->inspected==1 ? __('texte.mobile_views_arr.place_problems.inspected') : __('texte.mobile_views_arr.place_problems.inspect')}}" {{ $place_problem->inspected==1 ? "disabled" : ""}} @nonepermission('place_problem-route-edit') disabled @endnonepermission><i class='glyphicon glyphicon-check'></i></button>
                                                <a type='button' class='btn btn-danger delete_button' data-id='{{ $place_problem->id }}' title="{{__('texte.mobile_views_arr.place_problems.delete')}}" data-target='#modal-delete' data-toggle='modal' @nonepermission('place_problem-route-delete') disabled @endnonepermission><i class='glyphicon glyphicon-trash'></i></a>  
                                            </div> 
                                        </td>
                                        <td>{{ $place_problem->place->address }}</td>
                                        <td>{{ $place_problem->product->name }}</td>
                                        <td>{{ $place_problem->stock->batch}}</td>
                                        <td>{{ $place_problem->storage_product() ==0 ? $place_problem->stock->quantity : $place_problem->stock->quantity / $place_problem->product->package_count}}</td>
                                        <td>{{ $place_problem->storage_product() ==0 ? 'Брой' : $place_problem->product->package->name }}</td>
                                        <td>{{ $place_problem->stock->pallet }}</td>
                                    </tr>
                                    @endif
                                @endforeach
                                </tbody>
                            </table>
                        </div>                        
                    </div>
                </div>
                <div id="number_2" hidden>
                    <div id="inspect-problem" class="col-xs-12 col-sm-12 col-md-12">
                        <h4>{{__('texte.mobile_views_arr.place_problems.inspect_problem')}}</h4>                                
                        <div class="form-group">
                            <input type="hidden" id="place_problem_id" name="place_problem_id" value=""/>
                            <input type="hidden" id="stock" name="stock" value=""/>
                            <h4 class="control-label">{{__('texte.mobile_views_arr.place_problems.inspection_result')}}</h4>
                            <div class="input-group col-xs-12 col-sm-12 col-md-12">
                                <label class="control-label">
                                    <input type="radio" class="result" name="result" value="1"/>  {{__('texte.mobile_views_arr.place_problems.stock_damaged')}} 
                                </label>

                                <label class="control-label">
                                    <input type="radio" class="result" name="result" value="2"/>  {{__('texte.mobile_views_arr.place_problems.stock_ok')}}
                                </label>
                            </div>
                        </div>
                        <div class="form-group" style="margin-left:35%;">
                            <button type="button" id="done" class="btn btn-success" style="margin-top:15px;">{{__('texte.mobile_views_arr.place_problems.done')}}</button>
                        </div>
                    </div>
                </div>
                <div id="number_3" hidden>
                    <div id="delete-problem" class="col-xs-12 col-sm-12 col-md-12">
                        <h4>{{__('texte.mobile_views_arr.place_problems.place_problem_delete')}}</h4>
                        <div class="form-group">
                            {{__('texte.mobile_views_arr.place_problems.place_problem_delete_confirm')}}
                        </div>
                        <div class="form-group" style="margin-left:25%">
                            <button id="confirm_delete" type="button" class="btn btn-default" onclick="delete_region()">{{__('texte.mobile_views_arr.place_problems.yes')}}</button>
                            <button id="cancel" type="button" class="btn btn-primary" data-dismiss="modal"> {{__('texte.mobile_views_arr.place_problems.no')}}</button>
                        </div>
                    </div>
                </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.place_problems.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.place_problems.place_barcode')}}" value=""/>                                
                            </div>                             
                        </div>                                          
                        <div class="form-group">
                            <div class="input-group col-xs-11 col-sm-11 col-md-11">
                                <select name="search_product" id="search_product">
                                    <option value="">{{__('texte.mobile_views_arr.place_problems.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.place_problems.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" placeholder="{{__('texte.mobile_views_arr.place_problems.pallet_barcode')}}" value=""/>                                
                            </div>  
                            <div class="input-group col-xs-4 col-sm-4 col-md-5">    
                                 <button id="search" type="button" class="btn btn-success" style="min-width: 99px;font-size:11px;">{{__('texte.mobile_views_arr.place_problems.search')}}</button>
                            </div>
                        </div>
                        <div class="form-group">   
                            <div style="width:250px;overflow: scroll;max-height:200px;">
                                <table id="stocks" class="table table-bordered" style="font-size:10px;margin-top:10px;">
                                    <thead>
                                        <th>{{__('texte.mobile_views_arr.place_problems.address')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.product')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.batch')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.quantity_short2')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.package')}}</th>
                                        <th>{{__('texte.mobile_views_arr.place_problems.pallet')}}</th>
                                    </thead>
                                    <tbody>
                                        
                                    </tbody>
                                </table>
                            </div>
                        </div>
                        <div class="choose_product">
                            <table id="product_options" class="table table-bordered">
                                <span>Моля изберете продукт</span>
                                <tbody>

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

<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/datatables.min.js') }}"></script> 
<script src="{{ asset('js/jquery.scannerdetection.js') }}"></script>
<script src="{{ asset('js/jquery.validate.js') }}"></script>
<script src="{{ asset('js/validation.js') }}"></script>
<script type="text/javascript">
    
    var es = new EventSource("{{route('place_problems.show_new_problems')}}");
    es.addEventListener("message", function(e) {
        location.reload();
    }, false);
        
    $('#storage,#search_product').chosen();
    $('#measure').chosen({disable_search:true}); 
    
    $('#reference').on('click',function(){
       $(this).hide(); 
       $('#1').hide();
       $('#place_problems').show();
       $('.panel-title').html('Справка');
       $('#2').show();
    });
    
    $('#place_problems').on('click',function(){
       $(this).hide(); 
       $('#2').hide();
       $('.panel-title').html('Проблеми');
       $('#reference').show();
       $('#1').show();
       $('#number_1').show();
       $('#number_2').hide();
       $('#number_3').hide();
       
    });
    
    $('#cancel').on('click', function(){
        $('#number_1').show();
        $('#number_2').hide();
        $('#number_3').hide();
    });
    
    $('.inspect').on('click',function(){
        $('#stock').val($(this).attr('data-stock'));
        $('#place_problem_id').val($(this).attr('data-id'));
        $('#number_1').hide();
        $('#number_2').show();
        $('#number_3').hide();
    });
    
    $('#done').on('click', function(){        
       $('#modal-inspect').modal('hide');
       var stock = $('#stock').val();
       var result = $('.result:checked').val();
       var id = $('#place_problem_id').val();
       
        if(result!==undefined){
            $.ajax({
                 headers: {
                     'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                 },
                 url: "/inspect_place_problem",
                 type:"POST",
                 data:{
                         'id' : id,
                         'stock': stock,
                         'result': result,
                 },
                 success: function(response){                
                    if(response.warning){
                        alert(response.warning);
                    }
                    else{
                        location.reload();  
                    }  
                 }

             });
        }
        else{
            alert('Моля изберете резултат от проверката');
        }
    });
    
    $(document).on('click','.delete_button',function(){
        $('#confirm_delete').attr('onclick','delete_place_problem('+ $(this).data('id') + ')');
        $('#number_1').hide();
        $('#number_2').hide();
        $('#number_3').show();
    }); 
    
    function delete_place_problem(id){
        $.ajax({
            headers: {
                    'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
                    },
                    url: '/delete_plаce_problem',
                    type: 'POST',
            data: { 'id' : id},
            success: function(response){
                        location.reload;
                    }
        });    
    }
    
    $('#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('Не са намерени продукти');
                                    $('#search_product').val('').trigger('chosen:updated');
                                }
                                else{
                                    if(response.length==1){
                                        $('#search_product').val(response[0].id).trigger('chosen:updated');
                                    }
                                    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').val('').trigger('chosen:updated');
        }
    });
    
    $(document).on('click','#product_options tbody tr', function(){
        $('.choose_product').hide();

        $('#search_product').val($(this).find('td').attr('data-id')).trigger('chosen:updated');                            
    });
    
    $('#search').on('click', function(){
        let storage = $('#storage').val();
        let address = $('#address').val();
        let product = $('#search_product').val();
        let pallet = $('#pallet_barcode').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){
                                    $('#stocks tbody tr').remove();
                                    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].measure==0 ? response[i].quantity : response[i].quantity/response[i].package_count)+"</td><td>"+(response[i].measure==0 ? 'брой' : response[i].package_name)+"</td><td>"+(response[i].pallet!=null && response[i].pallet!=0 ? response[i].pallet : '')+"</td></tr>";
                                        $('#stocks tbody').append(row);
                                    }                               
                             }
                });
        }
    });
    
    $("a").each(function(){
        if($(this).attr('disabled')=='disabled'){
            $(this).addClass('not-active');
        }
    });
        
    
</script>
@endsection