@extends('admin.layout')
@section('content')
<style type="text/css">
	.required-mark {
		color: red;
	}
	hr {
		margin-left: 15px;
		margin-bottom:-3px;
	}
	.hr-primary {
		border: 1px solid #3c8dbc;
	}
	.bootstrap-select.btn-group .dropdown-menu li {
	    border-bottom: 1px solid #6c6c6cde;
	}
	.my-current	{
		color: #00c0ef;
	}
    table, td, th{
        text-align: center;
    }
    #watermarked::before {
    position: fixed;
    top: -75%;
    left: -75%;
    display: block;
    width: 300%;
    height: 300%;
    transform: rotate(-45deg);
    content: attr(data-watermark);
    font-size: 30px;
    opacity: 0.15;
    line-height: 4em;
    letter-spacing: 2px;
    color: #ff0523;
    z-index:0;
    }
    .content-wrapper, .right-side{
        background: #FFF;
    }
    .box {
        background: transparent;
        z-index: 1; 
    }
</style>
<div class="search-list">
	<div class="content-wrapper search-result-list"> 	
  <section class="content-header">
    <h1> {{ trans('Mask Machine Order Instruction') }} <small></small> </h1>
    <ol class="breadcrumb">
      <li><a href="{{ URL::to('admin/dashboard/this_month')}}"><i class="fa fa-dashboard"></i> {{ trans('labels.breadcrumb_dashboard') }}</a></li>
      <li class="active">{{ trans('Mask Machine Order Instruction') }}</li>
    </ol>
  </section>
    @php
        $getUserRoleData                = userRoleData();
        $OrderInstruction               = explode(",",$getUserRoleData->OrderInstruction);
    @endphp
  <section class="content"> 
    <div class="row">
      <div class="col-md-12">
        <div class="box box-info"> 
          <div class="box-body">
            <div class="row">
              <div class="col-xs-12">
              		<div class="">                        
						<div class="row">
							@if(session()->has('message'))
								<div class="alert alert-success alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-check"></i> {{ trans('labels.Successlabel') }}</h4>
									{{ session()->get('message') }}
								</div>
							@endif
							@if(session()->has('error'))
								<div class="alert alert-warning alert-dismissible">
								   <button aria-hidden="true" data-dismiss="alert" class="close" type="button">×</button>
								   <h4><i class="icon fa fa-warning"></i> {{ trans('labels.WarningLabel') }}</h4>
									{{ session()->get('error') }}
								</div>
							@endif
						</div>
                         <div class="box-body">				 	
                        	{!! Form::open(array('url' => route('mask-machine-order-instructions.store'), 'method'=>'post', 'class' => 'form-horizontal', 'id' => 'addMaskMachineOrderInstruction', 'enctype'=>'multipart/form-data')) !!}
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
                                        <a href="{{URL('admin/production-orders')}}/{{$result['production_order_id']}}" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
                                    </div>
                                </div>
                         	    <div class="row">
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="company_id" class="control-label">{{ trans('Company Name') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                 {!! Form::select('company_id', $result['Company_info'], 1, array('class'=>'form-control company_id', 'multiple'=>'', 'id'=>'company_id', 'required'=>'required')) !!}
                                            </div>
                                        </div>
                                    </div>   
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="format_no" class="control-label">{{ trans('Format No.') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="format_no" id="format_no" value="RHYSLEY/10.2/F/04" class="form-control" readonly required>
                                            </div>
                                        </div>
                                    </div>               
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="rev_number" class="control-label">{{ trans('Rev. No') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="rev_number" id="rev_number" value="01" class="form-control" readonly required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="date" class="control-label">{{ trans('Date') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="date" id="date" value="09.02.2021" class="form-control" readonly required>
                                            </div>
                                        </div>
                                    </div>   
                                    <div class="clearfix"></div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="mask_id" class="control-label">{{ trans('Mask Type') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <select name="mask_id" id="mask_id" class="form-control" multiple required onchange="get_model(this);">
                                                    <option value="">Select Mask Type</option>
                                                    @foreach($result['Masks'] as $Mask)
                                                        <option value="{{$Mask->id}}" model="{{$Mask->modal_no}}">({{$Mask->modal_no}}) {{$Mask->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>        
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="production_order_id" class="control-label">{{ trans('Production Order No') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <select name="production_order_id" id="production_order_id" class="form-control" multiple required>
                                                    <option value="">Select Production Order</option>
                                                    @foreach($result['ProductionOrders'] as $ProductionOrder)
                                                        <option value="{{$ProductionOrder->id}}" selected>R{{$ProductionOrder->order_no}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>          
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="model_no" class="control-label">{{ trans('Mask Model No.') }}  <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="model_no" id="model_no" value="" class="form-control" readonly required>
                                            </div>
                                        </div>
                                    </div>  
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="instruction_date" class="control-label">{{ trans('Instruction Date') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="instruction_date" value="{{date('Y-m-d')}}" id="instruction_date" class="form-control" required readonly>
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="clearfix"></div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="drawing_no" class="control-label">{{ trans('Drawing No') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="drawing_no" id="drawing_no" class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="machine_id" class="control-label">{{ trans('Machine No') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <select name="machine_id" id="machine_id" class="form-control" multiple required>
                                                    <option value="">Select Machine No</option>
                                                    @foreach($result['Machines'] as $Machine)
                                                        <option value="{{$Machine->id}}">{{$Machine->name}}</option>
                                                    @endforeach
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="machine_speed" class="control-label">{{ trans('Machine Speed') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="machine_speed" id="machine_speed" class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="operator_name" class="control-label">{{ trans('Operator Name') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="operator_name" id="operator_name" class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="supervisor_name" class="control-label">{{ trans('Supervisor Name') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="supervisor_name" id="supervisor_name" class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="manager_name" class="control-label">{{ trans('Manager Name') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <input type="text" name="manager_name" id="manager_name" class="form-control" required>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="helpers_name" class="control-label">{{ trans("Helper's Full Name") }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <textarea name="helpers_name" id="helpers_name" class="form-control" rows="1" required></textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="col-md-12">
                                        <table class="table table-bordered table-striped">
                                            <tbody id="items">
                                                <tr>
                                                    <th width="5%">S N.</th>
                                                    <th width="15%">Part Number</th>
                                                    <th width="25%">Description</th>
                                                    <th width="10%">GSM</th>
                                                    <th width="10%">Size</th>
                                                    <th width="25%">Remarks</th>
                                                    <th width="10%">Add/Remove</th>
                                                </tr>
                                                <tr class="order-instruction" id="item-1">
                                                    <td>Layer 1</td>
                                                    <td>
                                                        <input type="text" name="part_no[]" id="part_no-1" class="form-control part_no" autocomplete="off">
                                                        <span style="color: red" class="part" id="part-1"></span>
                                                    </td>
                                                    <td>
                                                        <textarea name="description[]" id="description-1" class="form-control description" rows="2"></textarea>
                                                        <span style="color: red" class="desc"  id="desc-1"></span>
                                                    </td>
                                                    <td>
                                                        <input type="text" name="gsm[]" id="gsm-1" class="form-control gsm" autocomplete="off">
                                                        <span style="color: red" class="gsmm" id="gsm-1"></span>
                                                    </td>
                                                    <td>
                                                        <input type="text" name="size[]" id="size-1"  class="form-control size" autocomplete="off">
                                                        <span style="color: red" class="sizee" id="size-1"></span>
                                                    </td>
                                                    <td>
                                                        <textarea name="remarks[]" id="remarks-1" class="form-control remarks" rows="2"></textarea>
                                                        <span style="color: red" class="remark"  id="remark-1"></span>
                                                    </td>
                                                    <td>
                                                        <button type="button" class="btn btn-primary" onclick="add_row();">+</button>
                                                    </td>
                                                </tr>
                                            </tbody>
                                        </table>
                                    </div>

                                    <div class="clearfix"></div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="note" class="control-label">{{ trans("Note") }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                <textarea name="note" id="note" class="form-control" rows="2" required>This document must be signed in presence of Operator, Supervisor/s, Ganesh Nair and Sumit Sharma in conference/office room.</textarea>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="clearfix"></div>
                                    <div class="col-md-12">
                                        <div class="box-footer text-center">
                                            <button type="submit" id="sub" class="btn btn-primary">{{ trans('Submit') }}</button>
                                            <a href="{{URL('admin/production-orders')}}/{{$result['production_order_id']}}" type="button" class="btn btn-primary">{{ trans('labels.back') }}</a>
                                        </div>
                                    </div>
                                </div>
                        	{!! Form::close() !!}	
                      </div>
                  </div>
              </div>
            </div>
          </div>
        </div>

        <div id="watermarked" data-watermark="{{ auth()->guard('admin')->user()->first_name }} {{ auth()->guard('admin')->user()->last_name }}" class="row listing">        
        </div>

      </div>
    </div>
  </section>
</div>
</div>
@endsection 
@section('scripts')
<script src="{!! asset('assets/admin/plugins/validate/jquery.validate.js') !!}"></script>
<script src="{!! asset('assets/admin/plugins/validate/additional-methods.js') !!}"></script>
<script src="{!! asset('assets/admin/dist/js/datetimepicker/jquery.datetimepicker.full.min.js') !!}"></script>
<link href="{!! asset('assets/admin/dist/js/datetimepicker/jquery.datetimepicker.min.css') !!}" rel="stylesheet" />
<script>
    document.querySelectorAll('#watermarked').forEach(function(el) {
              el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
          });
  </script>
<script type="text/javascript">

    function get_model(e)
    {
        if(e.options[e.selectedIndex])
        {
            var model = e.options[e.selectedIndex].getAttribute("model");
            $("#model_no").val(model);
        }
        else
        {
            $("#model_no").val('');
        }
    }

    var role_id = {{ auth()->guard('admin')->user()->role_id }};
    if(role_id > 2) {
        var currentDate = "{{ date('Y-m-d') }}";
        var twoDaysPastDate = "{{ date('Y-m-d', strtotime(' - 7 day', strtotime(date('Y-m-d')))) }}";
    } else {
        var twoDaysPastDate = "1970-01-01";
        var currentDate = "2080-01-01";
    }
    $('#instruction_date').datetimepicker({
        format:'Y-m-d',
        closeOnDateSelect:true,
        minDate:twoDaysPastDate,
        maxDate:currentDate,
        timepicker:false
    });

    $(function () { 
        $(".company_id, #mask_id, #production_order_id,#machine_id").select2({
            placeholder: "--- Choose ---",
            maximumSelectionLength: 1,
            formatSelectionTooBig: function (limit) {
                return 'Too many selected items';
            },
        }).on("select2:select", function (e) {
           
        }).on('select2:unselect', function (e) {
            
        });
    });
	
	$( "#addMaskMachineOrderInstruction" ).validate( {
			rules: {				
				company_id: {
					required: true,
				},              
                format_no: {
                    required: true,
                },              
                rev_number: {
                    required: true,
                },
                date: {
                    required: true,
                },  
                mask_id: {
                    required: true,
                }, 
                production_order_id: {
                    required: true,
                },
                model_no: {
                    required: true,
                },
                instruction_date: {
                    required: true,
                },
                drawing_no: {
                    required: true,
                },              
                machine_id: {
                    required: true,
                },
                machine_speed: {
                    required: true,
                },
                operator_name: {
                    required: true,
                },
                supervisor_name: {
                    required: true,
                },
                manager_name: {
                    required: true,
                },
			},
			errorElement: "em",
			errorPlacement: function ( error, element ) {
				error.addClass( "help-block" );
				element.parents( ".col-sm-5" ).addClass( "has-feedback" );
				if ( element.prop( "type" ) === "checkbox" ) {
					error.insertAfter( element.parent( "label" ) );
				} else {
					error.insertAfter( element );
				}
				if ( !element.next( "span" )[ 0 ] ) {
					$( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
				}
			},
			// success: function ( label, element ) {
			// 	if ( !$( element ).next( "span" )[ 0 ] ) {
			// 		$( "<span class='glyphicon glyphicon-ok form-control-feedback'></span>" ).insertAfter( $( element ) );
			// 	}
			// },
			highlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-error" ).removeClass( "has-success" );
				$( element ).next( "span" ).addClass( "glyphicon-remove" ).removeClass( "glyphicon-ok" );
			},
			unhighlight: function ( element, errorClass, validClass ) {
				$( element ).parents( ".col-sm-5" ).addClass( "has-success" ).removeClass( "has-error" );
				$( element ).next( "span" ).addClass( "glyphicon-ok" ).removeClass( "glyphicon-remove" );
			}
		} );	

        var No = 2;
        function add_row()
        {
            $("#items").append(`
                                <tr class="order-instruction" id="item-${No}">
                                    <td>Layer ${No}</td>
                                    <td>
                                        <input type="text" name="part_no[]" id="part_no-${No}" class="form-control part_no" autocomplete="off">
                                        <span style="color: red" class="part" id="part-${No}"></span>
                                    </td>
                                    <td>
                                        <textarea name="description[]" id="description-${No}" class="form-control description" rows="2"></textarea>
                                        <span style="color: red" class="desc"  id="desc-${No}"></span>
                                    </td>
                                    <td>
                                        <input type="text" name="gsm[]" id="gsm-${No}" class="form-control gsm" autocomplete="off">
                                        <span style="color: red" class="gsmm" id="gsm-${No}"></span>
                                    </td>
                                    <td>
                                        <input type="text" name="size[]" id="size-${No}" class="form-control size" autocomplete="off">
                                        <span style="color: red" class="sizee" id="size-${No}"></span>
                                    </td>
                                    <td>
                                        <textarea name="remarks[]" id="remarks-${No}" class="form-control remarks" rows="2"></textarea>
                                        <span style="color: red" class="remark"  id="remark-${No}"></span>
                                    </td>
                                    <td>
                                        <button type="button" class="btn btn-danger" onclick="remove_row(${No});">-</button>
                                    </td>
                                </tr>
                            `);
            No++;

            // Teaxt area size
            valid_textarea();
            valid_input();
        }

        function remove_row(number)
        {
            $('#item-'+number).remove();
        }

        valid_textarea();
        valid_input();

        // Teaxt area size
        function valid_textarea()
        {
            const tx = document.getElementsByTagName('textarea');
            for (let i = 0; i < tx.length; i++) {
              tx[i].setAttribute('style', 'height:' + (tx[i].scrollHeight) + 'px;overflow-y:hidden;');
              tx[i].addEventListener("input", OnInput, false);
            }
            function OnInput() {
              this.style.height = 'auto';
              this.style.height = (this.scrollHeight) + 'px';
            }
        }

        function valid_input()
        {
            $("#machine_speed, #operator_name, #supervisor_name, #manager_name, #drawing_no, .part_no, .description, .gsm, .size").keypress(function(e) {
                if (e.which === 32 && !this.value.length) {
                   e.preventDefault();
               }
               var inputValue = e.charCode;
               if(! (   (inputValue >= 65 && inputValue <= 90) || //A-Z
                        (inputValue >= 95 && inputValue <= 122) || //a-z
                        (inputValue >= 45 && inputValue <= 57) || //0-9
                        (inputValue == 13) )  //Enter
                        && (inputValue != 32 && inputValue != 0)
                    )
               {
                   e.preventDefault();
               }     
            });
        }

        $("#helpers_name, #note").keypress(function(e) {
                 if (e.which === 32 && !this.value.length) {
               e.preventDefault();
           }
           var inputValue = e.charCode;
        });
        
        // Validation
        $('#sub').click( function ()
        {
            var bool = false;
            $(".order-instruction").each(function(){
                var elem = $(this)
                if(elem.find('.part_no').val() == "" || elem.find('.part_no').val() == null)
                {
                    bool = true;
                    elem.find('.part').html('Required Field *');
                }
                else
                {
                    elem.find('.part').html('');
                }

                if(elem.find('.description').val() == "")
                {
                    bool = true;
                    elem.find('.desc').html('Required Field *');
                }
                else
                {
                    elem.find('.desc').html('');
                }

                if(elem.find('.gsm').val() == "")
                {
                    bool = true;
                    elem.find('.gsmm').html('Required Field *');
                }
                else
                {
                    elem.find('.gsmm').html('');
                }

                if(elem.find('.size').val() == "")
                {
                    bool = true;
                    elem.find('.sizee').html('Required Field *');
                }
                else
                {
                    elem.find('.sizee').html('');
                }
            });

            if(bool == true)
            {
                return false;
            }
        })
</script>
@endsection