@extends('admin.layout')
@section('content')
<style type="text/css">
	#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; 
    }
    .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;
    }
    .slot
    {
        padding: 0px 2px 0px 2px;text-align: center;
    }
    th
    {
        text-align: center;
    }
</style>
<div class="search-list">
    <div class="content-wrapper search-result-list">    
  <section class="content-header">
    <h1> {{ trans('Update PQT Report') }} <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('Update PQT Report') }}</li>
    </ol>
  </section>
  <section class="content"> 
    @php
        $getUserRoleData = userRoleData();
        $LeadSources        = explode(",",$getUserRoleData->LeadSources);
    @endphp

    <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('pqt-report.update', [$result['Pqt_reportData']['id']]), 'method'=>'post', 'class' => 'form-horizontal', 'id' => 'addNewLeadSources', 'enctype'=>'multipart/form-data')) !!}
                                <input type="hidden" name="_method" value="PUT">
                                <input type="hidden" name="id" id="id" value="{{$result['Pqt_reportData']['id']}}">
                                <div class="row">
                                    <div class="col-md-12">
                                        <button type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
                                        <a href="{{URL('admin/pqt-report')}}" 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'], $result['Pqt_reportData']->company_id, 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">
                                                {!! Form::text('format_no',  'RHYSLEY/10.3/F/02', array('class'=>'form-control', 'id'=>'format_no', 'required'=>'required', 'readonly'=>'readonly')) !!}
                                            </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">
                                                {!! Form::text('rev_number',  $result['Pqt_reportData']->rev_number, array('class'=>'form-control', 'id'=>'rev_number', 'required'=>'required', 'readonly'=>'readonly')) !!}
                                            </div>
                                        </div>
                                    </div>      
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="pqt_date" class="control-label">{{ trans('Date') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                {!! Form::text('pqt_date',  $result['Pqt_reportData']->pqt_date, array('class'=>'form-control', 'id'=>'pqt_date', 'required'=>'required', 'readonly'=>'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="date_desc" class="control-label">PQT Date <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                {!! Form::text('date_desc', $result['Pqt_reportData']->date_desc, array('class'=>'form-control', 'id'=>'date_desc', 'readonly'=>'readonly', 'required'=>'required')) !!}
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="col-md-3">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="po" class="control-label">{{ trans('Client Name/Code') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                {!! Form::text('client_name_code', $result['Pqt_reportData']->client_name_code, array('class'=>'form-control space', 'id'=>'client_name_code', 'required'=>'required')) !!}
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="col-md-4">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="mask_type_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_type_id" id="mask_type_id" class="form-control mask_type_id" onchange="get_model(this);" required multiple>
                                                   <option value="">Select Mask Type</option> 
                                                   @foreach($result['Mask_types'] as $mask)
                                                        <option value="{{$mask->id}}" selected model="{{$mask->modal_no}}">({{$mask->modal_no}}) {{$mask->name}}</option>
                                                   @endforeach    
                                                </select>
                                            </div>
                                        </div>
                                    </div>
                                    <div class="col-md-2">
                                        <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">
                                                {!! Form::text('model_no', $result['Pqt_reportData']->model_no, array('class'=>'form-control', 'id'=>'model_no', 'required'=>'required', 'readonly'=>'readonly')) !!}
                                            </div>
                                        </div>
                                    </div> 
                                    <div class="clearfix"></div>
                                    <div class="col-md-12">
                                        <div class="form-group">
                                            <div class="col-sm-12 col-md-12">
                                                <label for="instructions" class="control-label">{{ trans('Instructions') }} <span class="required-mark">*</span></label>
                                            </div>
                                            <div class="col-sm-10 col-md-12">
                                                {!! Form::textarea('instructions', $result['Pqt_reportData']->instructions, array('class'=>'form-control instructions space1', 'id'=>'instructions', 'required'=>'required', 'rows'=>'2')) !!}
                                            </div>
                                        </div>
                                    </div>     
                                    <div class="clearfix"></div>
                                    <ul id="ipqc-sorting2">
                                        <li>
                                            <span class="blanckArea"></span>
                                            <table class="table table-bordered table-striped">
                                                <tbody>
                                                    <tr>
                                                        <th rowspan="2" width="4%">S.N.</th>
                                                        <th rowspan="2" width="14%">Description</th>
                                                        <th rowspan="2" width="10%">Criteria</th>
                                                        <th rowspan="2" width="10%">Requirement</th>
                                                        <th rowspan="2" width="10%">Test Method</th>
                                                        <th colspan="5" width="30%" style="text-align: center;">Sampling as per AQL</th>
                                                        <th rowspan="2" width="10%">Result</th>
                                                        <th rowspan="2" width="12%">Remarks</th>
                                                    </tr>
                                                    <tr>
                                                        <th>1</th>
                                                        <th>2</th>
                                                        <th>3</th>
                                                        <th>4</th>
                                                        <th>5</th>
                                                    </tr>
                                                </tbody>
                                            </table>
                                        </li>
                                    </ul>
                                    <ul id="ipqc-sorting">
                                                                            </ul>
                                    <div class="clearfix"></div>
                                    <div class="col-md-12">
                                        <div class="box-footer text-center">
                                            <button id="sub" type="submit" class="btn btn-primary">{{ trans('Submit') }}</button>
                                            <a  href="{{URL('admin/pqt-report')}}" 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" />
<!--Sorting start-->
<script src="{!! asset('assets/admin/js/jquery-ui.min.js') !!}"></script>
<link href="{!! asset('assets/admin/dist/css/jquery-ui.min.css') !!}" rel="stylesheet" />
<script>
    $(document).ready(function(){
        var lastScrollPosition = 0; //variables defined in upper scope
        var tempScrollPosition = 0;
        window.onscroll = function () { // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
            clearTimeout($.data(this, 'scrollTimer'));
            $.data(this, 'scrollTimer', setTimeout(function () {
                tempScrollPosition = lastScrollPosition; // Scrolls don't change from position a to b. They cover some numbers between a and b during the change to create a smooth sliding visual. That's why we pick the previous scroll position with a timer of 250ms.
            }, 250));

            lastScrollPosition = $(document).scrollTop(); // Up to you requirement you may change it to another elemnet e.g $("#YourPanel").onscroll
        };
        $('#ipqc-sorting').sortable({
            connectWith: "#ipqc-sorting",
            cursor: "move",
            axis: 'y',
            handle: ".sort",            
            scroll: true,
            scrollSensitivity: 80,
            scrollSpeed: 3,
            sort: function(event, ui) {
                var currentScrollTop = $(window).scrollTop(),
                    topHelper = ui.position.top,
                    delta = topHelper - currentScrollTop;
                setTimeout(function() {
                    $(window).scrollTop(currentScrollTop + delta);
                }, 500);
            },
            stop: function (event, ui) {
                
                $('#ipqc-sorting > li').each(function(i, e){
                    $(this).find('.serialNumber').text(i+1);
                })
            },
        });
    })
</script>
<style>
    ul#ipqc-sorting li, ul#ipqc-sorting2 li {
        list-style: none;
        display: flex;
        align-items: center;
    }
    ul#ipqc-sorting, ul#ipqc-sorting2 {
        padding: 0;
    }
    ul#ipqc-sorting li .sort {
        width: 50px;
        text-align: center;
        line-height: 1;
        font-size: 22px;
        color: #666;
        cursor: move;
    }
    .blanckArea{
        width: 50px;
    }
</style>
<!--Sorting end-->
<script type="text/javascript">
    $(".space1").keypress(function(e) {
                 if (e.which === 32 && !this.value.length) {
               e.preventDefault();
           }
           var inputValue = e.charCode;
    });
    $(".space").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();
           }     
    });

    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';
    }

    $(document).ready(function() {
        var model = $("#mask_type_id").find(':selected').attr('model');
        $("#model_no").val(model);
    })
    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";
    }

    $('#pqt_date').datetimepicker({
        format:'Y-m-d',
        closeOnDateSelect:true,
        minDate:twoDaysPastDate,
        maxDate:currentDate,
        timepicker:false
    });
    $('#date_desc').datetimepicker({
        format:'Y-m-d',
        closeOnDateSelect:true,
        minDate:twoDaysPastDate,
        maxDate:currentDate,
        timepicker:false
    });

    $(function () { 
        $(".company_id, #mask_type_id").select2({
            placeholder: "--- Choose ---",
            maximumSelectionLength: 1,
            formatSelectionTooBig: function (limit) {
                return 'Too many selected items';
            },
        }).on("select2:select", function (e) {
           
        }).on('select2:unselect', function (e) {
            
        });

    });
    
    // Alphabets Only
    $.validator.addMethod("alpha", function(value, element) {
        return this.optional(element) || value == value.match(/^[a-zA-Z\s]+$/);
    }); 
    
    // Numeric Only
    $.validator.addMethod("numericData", function(value, element) {
        return this.optional(element) || value == value.match(/^[0-9]+$/);
    }); 
    
    // Password Check
    $.validator.addMethod("pwcheck", function(value) {
        return /^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[#?!@$%^&*-]).{6,16}$/.test(value) // consists of only these
    });
    
    // Email Check
    $.validator.addMethod("email", function(value) {
        return /^(([^<>()\[\]\\.,;:\s@"]+(\.[^<>()\[\]\\.,;:\s@"]+)*)|(".+"))@((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(value) // consists of only these
    });
    
    // File Size Validation
    jQuery.validator.addMethod("filesize_max", function(value, element, param) {
        var isOptional = this.optional(element),
            file;

        if(isOptional) {
            return isOptional;
        }
        if ($(element).attr("type") === "file") {

            if (element.files && element.files.length) {

                file = element.files[0];            
                return ( file.size && file.size <= param ); 
            }
        }
        return false;
    }, "File size is too large.");
    
    $( "#addNewLeadSources" ).validate( {
            rules: {                
                company_id: {
                    required: true,
                },              
                format_no: {
                    required: true,
                },              
                rev_number: {
                    required: true,
                },              
                po: {
                    required: true,
                },             
                mask_type_id: {
                    required: true,
                },             
                'total[]': {
                    required: true,
                },             
                // 'accepted[]': {
                //     required: true,
                // },             
                // 'rejected[]': {
                //     required: true,
                // },
            },
            messages: {
                company_id: {
                    required: "Please select company name",
                },
                format_no: {
                    required: "Please enter format no",
                },
                rev_number: {
                    required: "Please enter rev. no",
                },
                client_name_code: {
                    required: "Please enter Client Name/Code",
                },
                model_no: {
                    required: "Please enter Mask Model No",
                },
                instructions: {
                    required: "Please enter Instructions",
                },
                mask_type_id: {
                    required: "Please select mask type",
                },
                'total[]': {
                    required: "Please enter total",
                },
                // 'accepted[]': {
                //     required: "Please enter accepted",
                // },
                // 'rejected[]': {
                //     required: "Please enter rejected",
                // },
            },
            errorElement: "em",
            errorPlacement: function ( error, element ) {
                // Add the `help-block` class to the error element
                error.addClass( "help-block" );

                // Add `has-feedback` class to the parent div.form-group
                // in order to add icons to inputs
                element.parents( ".col-sm-5" ).addClass( "has-feedback" );

                if ( element.prop( "type" ) === "checkbox" ) {
                    error.insertAfter( element.parent( "label" ) );
                } else {
                    error.insertAfter( element );
                }

                // Add the span element, if doesn't exists, and apply the icon classes to it.
                if ( !element.next( "span" )[ 0 ] ) {
                    $( "<span class='glyphicon glyphicon-remove form-control-feedback'></span>" ).insertAfter( element );
                }
            },
            success: function ( label, element ) {
                // Add the span element, if doesn't exists, and apply the icon classes to it.
                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" );
            }
        } );  


        $('#sub').click( function (){
            var total = $("input[name='total[]']")
                  .map(function(){return $(this).val();}).get();
            var accepted = $("input[name='accepted[]']")
                  .map(function(){return $(this).val();}).get();
            var rejected = $("input[name='rejected[]']")
                  .map(function(){return $(this).val();}).get();
            var rejection_reason = $('body').find("textarea[name='rejection_reason[]']")
                  .map(function(){return $(this).val();}).get();
            var bool = false;
            for(var i = 0; i < rejected.length; i++)
            {
                if(rejected[i] > 0 && rejection_reason[i] == '')
                {
                    $('#error'+i).html('Rejection reason required');
                    bool = true;
                }
                else
                {
                    $('#error'+i).html('');
                }

                if(total[i] > 0 && (accepted[i] == '' || accepted[i] == 0) && total[i] > rejected[i])
                {
                    $('#err'+i).html('Accepted required');
                    bool = true;
                }
                else if(total[i] > 0 && accepted[i] == '' && total[i] >= rejected[i])
                {
                    $('#err'+i).html('Accepted required');
                    bool = true;
                }
                else
                {
                    $('#err'+i).html('');
                }
            }
            if(bool == true)
            {
                return false;
            }
            // $('.valid').each(function(i, obj) {
            //     console.log(i);
            //     console.log(obj);
            // });
        })
</script>
<script>
	document.querySelectorAll('#watermarked').forEach(function(el) {
			  el.dataset.watermark = (el.dataset.watermark + ' ').repeat(500);
		  });
  </script>
@endsection