@extends('layouts.app')

@section('content')
<div class="row">
@include('shared.messages')
    <div class="col-sm">
        <div class="box">
            <div class="box-header">
                <ul class="nav nav-tabs" id="myTab" role="tablist" style="padding: 10px 0 0 10px;">
                    <li class="nav-item">
                        <a class="nav-link" href="{{route('devices.index')}}"><h4>Devices</h4></a>
                    </li>
                    @if(auth()->user()->role->role=='Super Admin' || auth()->user()->role->role=='Admin' || auth()->user()->role->role=='Admin Guest')
                    <li class="nav-item">
                        <a class="nav-link" href="{{route('new_devices.index')}}"><h4>New Devices</h4></a>
                    </li>
                    <!--
                    <li class="nav-item">
                        <a class="nav-link" href="{{route('device_types.index')}}"><h4>Devices Types</h4></a>
                    </li>
                    -->
                    @endif
                    @if(auth()->user()->role->role!='Installer')
                    <li class="nav-item active">
                        <a class="nav-link" href="{{route('devices.attach')}}"><h4>Attach devices</h4></a>
                    </li>
                    @endif
                </ul>
                <small>{{'Attach devices'}}</small>
            </div>

            <div class="panel-body">
                <form id="attach_devices"  method="POST" action="{{route('devices.post_attach')}}" role="form" style='width:900px;margin-left:auto;margin-right:auto;'>
                    {{ csrf_field() }}                           

                    <div class="form-group">
                        <label class="control-label required">User</label>
                        <select name="user_id" class="form-control" required>
                            <option value=""></option>
                            @foreach($users as $user)

                                <option value="{{$user->id}}">{{$user->first_name.' '.$user->last_name}}</option>

                            @endforeach
                        </select>                                
                    </div> 

                    <div class="form-group">
                        <label class="control-label">Orbit device ID</label>
                        <input type="text" name="serial_number" class="form-control serial_number" value=""/>
                    </div>

                    <div class="form-group">
                        <label class="control-label required">Devices to attach</label>
                        <textarea id="devices" name="devices" type="text" class="form-control" value="" cols='40' rows='8' required="required"></textarea>
                    </div>

                    <div class="form-group" style="text-align:center;">
                        <button type="submit" class="btn btn-primary w-xs btn-sm">Submit</button>
                    </div> 
                </form>     
            </div>
            <div class="panel-footer"></div>
        </div>
    </div>
</div>

<script src="{{ asset('js/jquery.scannerdetection.js') }}"></script>
<script type="text/javascript">
    
    $(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.val($(element).val().replace(/^0+/, '').slice(0,-1));
                element.change();
            } // main callback function	
    });
    
    $(".serial_number").on('change',function(){
        
        var txt = $("#devices");
        
        if($(this).val()!==''){
            if(txt.val()!==''){
                txt.val( txt.val() + ",\n" + $(this).val());
            }
            else{
                txt.val($(this).val());
            }
        }
        
        $(this).val('');
    });
    
    $('#attach_devices').on('keyup keypress', function(e) {
        var keyCode = e.keyCode || e.which;
        if (keyCode === 13) { 
          e.preventDefault();
          return false;
        }
    });
    
</script>
@endsection