@extends('layouts.main_frontend')
@section('title','RCSA - Add Loss Event')
@section('main-content')
<link rel="stylesheet" href="{{asset('/css/frontend/loss_events_create.css')}}" type="text/css" />

<main role="main" class="col-md-9 ml-sm-auto col-lg-10 edit-document dashboard-page-head document pt-3 pb-2 mb-2">
    <form action="{{route('loss-events.store')}}" method="POST" id="eventForm" enctype="multipart/form-data">
    @csrf
        <div>
            <div class="d-flex flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-2">
                <a href="{{ route('loss-events.index') }}"><i class="fas fa-chevron-left"></i></a>
                <h1 class="">Add Loss Event</h1>
            
            </div>

            <div id="main">
                <div class="container">
                  <div class="row mb-4 validation_message">
                    <div class="col-lg-12 col-md-12" style="color:#ff0000!important;"> 
                      <ul>
                        @foreach ($errors->all() as $error)
                            <li>{{ $error }}</li>
                        @endforeach
                      </ul>
                    </div>
                </div>
                  <div class="accordion" id="faq">
                        <div class="card">
                        <div class="card-header" id="faqhead1">
                            <a href="#" class="btn btn-header-link" data-toggle="collapse" data-target="#faq1"
                              aria-expanded="true" aria-controls="faq1">Loss Events</a>
                        </div>

                        <div id="faq1" class="row collapse show" aria-labelledby="faqhead1" data-parent="#faq">
                        <div class="col-lg-6 col-md-12">
                      
                            <div class="form-group">
                              <label for="organizationName">Organization Name</label>
                              <input type="text" class="form-control" id="orgName" value="{{ucwords($organization->name)}}" readonly/>
                              <input type="hidden" name="organization_id" value="{{$organization->id}}">
                              <label for="organization_id" class="error"></label>

                            </div>

                            <div class="form-group">
                              <label for="developement">Department Name / Business Entity Name / Process <span class="req-span">*</span> </label>
                                <div class="select_custom">
                                  <i class="fas fa-sort-down"></i>
                                  <select class="form-control" id="unit" name="unit">
                                    <option value="">Select Department Name / Business Entity Name / Process</option>
                                      @if($unitType)
                                          @foreach($unitType as $key => $val)
                                            <option value="{{ $val['id'] }}" {{ (isset($event) ? $event->unit_id   : old('unit')) == $val['id'] ? 'selected' : '' }}>{{ $val['name'] }}</option>
                                          @endforeach
                                      @endif
                                    </select>
                               </div>
                              <label for="unit" class="error"></label>
                            </div>
                            <div class="form-group">
                              <label for="developement">Loss Event Reference Number <span class="req-span">*</span> </label>
                              <input type="text" class="form-control" name="incident_no" placeholder="Add reference_no" id="incident-no" value="{{$incident_ref_no ?? old('incident_no')}}" readonly>
                              <label for="incident_no" class="error"></label>

                            </div>

                            <div class="form-group">
                              <label for="developement">Description of the Incident <span class="req-span">*</span> </label>
                              <textarea name="incident_desc" class="form-control" id="incident-desc" placeholder="Add Description of the Incident" rows="4" cols="50">{{@$incident_desc ?? old('incident_desc')}}</textarea>
                              <label for="incident_desc" class="error"></label> 
                            </div>

                             <div class="form-group">
                                <label for="estimated-loss">Actual or Estimated Loss Due to Incident  <span class="req-span">*</span> <span style="color: #FFB339;">(Note: Currency Type {{$organization->currencies->code ?? 'INR'}} )</span></label>
                                <input type="text" class="form-control" id="estimated-loss" aria-describedby="" name="estimated_loss" placeholder="Add Estimated Loss Number" value="{{old('estimated_loss')}}" onkeypress="return (event.charCode >= 48 && event.charCode <= 57) || (event.charCode == 32)" maxlength="13" >
                                <label for="estimated_loss" class="error"></label>
                            </div>  
                       
                          </div>
                          <div class="col-lg-6 col-md-12">
                             <div class="form-group">
                               <label for="risk-event-no">Risk Reference Number <span class="req-span">*</span> </label>
                               <div class="select_custom">
                                  <i class="fas fa-sort-down"></i>
                                  <select class="form-control" id="risk_reference_number" name="risk_reference_number">
                                    <option value="">Select Risk Reference Number</option>
                                      @if($risks)
                                          @foreach($risks as $key => $val)
                                            <!-- <option value="{{ $val->reference_no }}" {{ old('risk_reference_number') === $val->reference_no ? 'selected' : '' }}>{{ $val->reference_no }}</option> -->
                                            <option value="{{ $val->reference_no }}">{{ $val->reference_no }}</option>
                                          @endforeach
                                      @endif
                                    </select>
                               </div>
                                <label for="risk_reference_number" class="error"></label>
                                <span class="alert-message" id="risk_reference_number_err"></span>      
                                <a href="{{route('risks.create')}}" class="risk-add">Add Risk </a>
                                
                            </div>
                            <div class="form-group">
                                <label for="related-risk">Risk Event Name <span class="req-span">*</span> </label>
                                <!-- <input type="text" class="form-control" placeholder="Risk Event Name" id="related-risk" readonly>
                                <input type="hidden" name="related_risk" id="related-risk-hidden" value="{{old('related_risk')}}"> -->

                                <div class="select_custom">
                                    <i class="fas fa-sort-down"></i>
                                    <select class="form-control" id="related-risk" name="related_risk">
                                    <option value="">Select Risk Event Name </option>

                                        <!-- @if($riskList)
                                          @foreach($riskList as $key => $val)
                                            <option value="{{ $key }}" {{ (isset($event) ? $event->related_risk_id   : old('related_risk')) == $key ? 'selected' : '' }}>{{ $val }}</option>
                                          @endforeach
                                        @endif -->
                                      </select>
                                </div>

                                <span class="related_risk_err"></span>
                                <label for="related_risk" class="error"></label>                   
                              </div>  
                            
                            <div class="form-group">
                              <label for="selectrcsaunit">Key Risk Level Relation <span class="req-span">*</span> </label>
                              <!-- <input type="text" class="form-control" placeholder="Risk Level Name" id="risk-level" readonly>
                              <input type="hidden" name="risk_level" id="risk-level-hidden"> -->

                              <div class="select_custom">
                                  <i class="fas fa-sort-down"></i>
                                  <select class="form-control" id="risk-level" name="risk_level">
                                      <option value="">Select Risk Level</option>
                                      <!-- @foreach($risk_levels as $id=>$name)
                                        <option value="{{$id}}">{{$name}}</option>
                                      @endforeach -->
                                    </select>
                              </div>
                              <span class="level_err"></span>

                              <label for="risk_level" class="error"></label>                       
                            </div>
                            <div class="form-group">
                                <label for="risk-category">Key Risk Category Relation <span class="req-span">*</span> </label>
                                <!-- <input type="text" class="form-control" id="risk-category"  placeholder="Risk Category Name" readonly>
                                <input type="hidden" name="risk_category" id="risk-category-hidden" > -->

                              <div class="select_custom">
                                  <i class="fas fa-sort-down"></i>
                                  <select class="form-control" id="risk-category" name="risk_category">
                                      <option value="">Select Risk Category</option>
                                     <!--  @foreach($risk_categories as $id=>$name)
                                        <option value="{{$id}}">{{$name}}</option>
                                      @endforeach -->
                                    </select>
                              </div>
                              <span class="category_err"></span>
                              <label for="risk_category" class="error"></label>                    
                            </div>
                            <div class="form-group">
                              <label for="risk-subcategory">Key Risk Sub Category Relation <span class="req-span">*</span> </label>
                             <!--  <input type="text" class="form-control" id="risk-subcategory"  placeholder="Risk Sub Category Name" readonly>
                              <input type="hidden" name="risk_subcategory" id="risk-subcategory-hidden"> -->
                              <div class="select_custom">
                                  <i class="fas fa-sort-down"></i>
                                  <select class="form-control" id="risk-subcategory" name="risk_subcategory">
                                      <option value="">Select Risk Subcategory</option>
                                      <!-- @foreach($risk_sub_categories as $id=>$name)
                                    <option value="{{$id}}">{{$name}}</option>
                                    @endforeach -->
                                    </select>
                             </div>

                             <span class="subcategory_err"></span>
                             <label for="risk_subcategory" class="error"></label>                    
                            </div>
                                            
                          </div>
                        </div>
                      </div>
                      <div class="card">
                          <div class="card-header" id="faqhead2">
                              <a href="#" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq2"
                              aria-expanded="true" aria-controls="faq2">Key Dates</a>
                          </div>

                          <div id="faq2" class="row collapse" aria-labelledby="faqhead2" data-parent="#faq">
                            <div class="col-lg-6 col-md-12">                      
                              <div class="form-group">
                                <label for="firstdate">First Date of Occurence <span class="req-span">*</span> </label>
                                <input type="date" class="form-control" id="firstdate" aria-describedby="" name="first_date" value="{{ !empty($model->first_occurence_date) ? strftime('%Y-%m-%d',strtotime($model->first_occurence_date)) : '' }}">
                                <label for="first_date" class="error"></label>
                              </div>

                              <div class="form-group">
                                <label for="lastdate">Last Date of Occurence <span class="req-span">*</span> </label>
                                <input type="date" class="form-control" id="lastdate" aria-describedby="" name="last_date" value="{{ !empty($model->last_occurence_date) ? strftime('%Y-%m-%d', strtotime($model->last_occurence_date)) : '' }}" placeholder="">
                                <label for="last_date" class="error"></label>
                              </div>
                              <div class="form-group">
                                <label for="discoverydate">Date of Discovery <span class="req-span">*</span> </label>
                                <input type="date" class="form-control" id="discoverydate" aria-describedby="" name="discovery_date" value="{{ !empty($model->discovery_date) ? strftime('%Y-%m-%d', strtotime($model->discovery_date)) : '' }}" placeholder="">
                                <label for="discovery_date" class="error"></label>
                              </div>                                                   
                            </div>

                            <div class="col-lg-6 col-md-12">                      
                              <div class="form-group">
                                <label for="settlementdate">Date of Settlement <span class="req-span">*</span> </label>
                                <input type="date" class="form-control" id="settlementdate" aria-describedby="" name="settlement_date" value="{{ !empty($model->settlement_date) ? strftime('%Y-%m-%d', strtotime($model->settlement_date)) : '' }}" placeholder="">
                                <label for="settlement_date" class="error"></label>
                              </div>

                              <div class="form-group">
                                <label for="impactdate">Date of Financial Impact <span class="req-span">*</span> </label>
                                <input type="date" class="form-control" id="impactdate" aria-describedby="" name="impact_date" value="{{ !empty($model->financial_impact_date) ? strftime('%Y-%m-%d', strtotime($model->financial_impact_date)) : '' }}" placeholder="">
                                <label for="impact_date" class="error"></label>
                              </div>
                              <div class="form-group">
                                <label for="closuredate">Expected Closure Date <span class="req-span">*</span> </label>
                                <input type="date" class="form-control" id="closuredate" aria-describedby="" name="closure_date" value="{{ !empty($model->expected_closure_date) ? strftime('%Y-%m-%d', strtotime($model->expected_closure_date)) : '' }}" placeholder="">
                                <label for="closure_date" class="error"></label>
                              </div>                                                   
                            </div>
                        </div>
                        </div>
                        <div class="card">
                            <div class="card-header" id="faqhead3">
                                <a href="#" class="btn btn-header-link collapsed" data-toggle="collapse" data-target="#faq3" aria-expanded="true" aria-controls="faq3">Root Cause</a>
                            </div>

                          <div id="faq3" class="row collapse" aria-labelledby="faqhead3" data-parent="#faq">
                            <div class="col-lg-6 col-md-12">                      
                              <div class="form-group">
                                  <label for="root-cause">Root Cause <span class="req-span">*</span> </label>
                                  <input type="text" class="form-control" id="root-cause" name="root_cause" placeholder="Enter root cause">
                                  <label for="root_cause" class="error"></label>
                              </div>

                              <div class="form-group">
                                  <label for="customer_impact">Did it have customer Impact</label>
                                  <div class="radio_btn_wrap">
                                      <div class="form-check">
                                          <label>
                                              <input type="radio" name="customer_impact" value="y" checked />
                                              <p><span>Yes</span></p>
                                          </label>
                                      </div>
                                      <div class="form-check">
                                          <label>
                                              <input type="radio" name="customer_impact" value="n" />
                                              <p><span>No</span></p>
                                          </label>
                                      </div>
                                  </div>
                                  <label for="customer_impact" class="error"></label>          
                              </div>
                              <div class="form-group">
                                  <label for="Organization">Was it Reported Internally/Externally</label>
                                  <div class="radio_btn_wrap">
                                      <div class="form-check">
                                          <label>
                                              <input type="radio" name="reported" value="e" checked />
                                              <p><span>External</span></p>
                                          </label>
                                      </div>
                                      <div class="form-check">
                                          <label>
                                              <input type="radio" name="reported" value="i" />
                                              <p><span>Internal</span></p>
                                          </label>
                                      </div>
                                  </div>
                                  <label for="reported" class="error"></label>          
                              </div>
                              <div class="form-group">
                                  <label for="incident-cause">Potential Cause of the Incident <span class="req-span">*</span> </label>
                                  <input type="text" class="form-control" id="incident-cause" name="incident_cause" value="{{old('incident_cause')}}" placeholder="Enter Potential cause">
                                  <label for="incident_cause" class="error"></label>
                              </div>
                              <div class="form-group">
                                  <label for="remedy">Suggested Remedy to Prevent Recurrence <span class="req-span">*</span> </label>
                                  <input type="text" class="form-control" id="remedy" name="remedy" placeholder="Enter Suggested Remedy to Prevent Recurrence" value="{{old('remedy')}}">
                                  <label for="remedy" class="error"></label>
                              </div>
                                                                                                       
                            </div>
                            <div class="col-lg-6 col-md-12">
                              <div class="form-group">
                                  <label for="comments">Comments</label>
                                  <textarea class="form-control" id="comments" rows="4" cols="50" name="comments" placeholder="Please add comments">{{old('comments')}}</textarea> 
                                  <label for="comments" class="error"></label>
                              </div>
                              <div class="form-group">
                                <div>
                                  <label for="organizationName">Upload Evidence/Attachments</label>
                                  <div class="upload_wrap">
                                    <i class="fas fa-upload"></i>
                                    <div>
                                      <input type="file" name="files" accept="application/msword, application/vnd.ms-excel, application/pdf, image/jpg, image/jpeg, .doc, .docx, application/msword,application/vnd.openxmlformats-officedocument.wordprocessingml.document,application/vnd.openxmlformats-officedocument.spreadsheetml.sheet">
                                    </div>
                                    <p class="upload_sub_text"><span>Supports :</span> pdf / word / excel / jpg</p>
                                  </div>
                                  <label for="files" class="error"></label>
                                </div>
                              </div>
                              <div class="form-group">
                                  <label for="Organization">Loss Event Status</label>
                                  <div class="radio_btn_wrap">
                                      <div class="form-check">
                                          <label>
                                              <input type="radio" name="status" value="o" checked />
                                              <p><span>Open</span></p>
                                          </label>
                                      </div>
                                      <div class="form-check">
                                          <label>
                                              <input type="radio" name="status" value="c" />
                                              <p><span>Close</span></p>
                                          </label>
                                      </div>
                                  </div>
                                  <label for="status" class="error"></label>          
                              </div>
                            </div>  
                          </div>
                        </div> 
                    </div>
                </div>
            </div>
        </div>

        <div class="d-flex btn_wrap">
            <a href="{{route('loss-events.index')}}" class="btn btn-primary btn-custom btn_custom_noBg">Cancel</a>
            <input type="hidden" name="is_draft" id="is_draft" value="0">
            <button type="submit" id="save-draft" class="btn btn-primary btn-custom btn_custom_noBg button_click">Draft</button>
            @if(count($riskList) > 1)
              <button type="submit" class="btn btn-primary btn-custom btn_custom_bg button_click" id="submitBtnCall">Submit</button>
            @endif
        </div>
    </form>
</main>
@endsection

@section('additionaljs')

<script src="{{asset('/js/admin/jquery.validate.min.js')}}"></script>
<!--<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.11.1/jquery.validate.min.js"></script>-->
<script type="text/javascript">
var getRiskDetailUrl = "{{ url('loss-events/riskdetail') }}";
var csrfTokens = "{{ csrf_token() }}";
$(document).ready(function(){
  $("#risk_reference_number").on('click', function (e) {
        e.preventDefault();
        $.ajaxSetup({
            headers: {
                'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
            }
        });

        var risk_ref_num = $(this).val();

        $("#risk-category").empty();
        $("#risk-subcategory").empty();
        $("#risk-level").empty();
        $("#related-risk").empty();

        $.ajax({
            url:getRiskDetailUrl+'/'+risk_ref_num,
            type:'GET',
            data:{"_token": csrfTokens,"risk_ref_num": risk_ref_num },
            dataType:'JSON',
            contentType: false,
            cache: false,
            processData: false,
            success:function(data) {
                $("#risk-category").prop('selectedIndex',0);
                $("#risk-subcategory").prop('selectedIndex',0);
                $("#risk-level").prop('selectedIndex',0);

                var riskName = '';
                var riskLevel = '';
                var riskCategory = '';
                var riskSubCategory = '';

                if(data) {
                  $("#risk-category").empty();
                  $("#risk-subcategory").empty();
                  $("#risk-level").empty();
                  $("#related-risk").empty();
                  
                  console.log('Success : ' + JSON.stringify(data));
                  
                  if (data.risk_id) {
                    // $("#related-risk-hidden").val(data.risk_id);
                    riskName = '<option value="'+data.risk_id+'" selected="selected">'+data.risk_name+'</option>';
                  } else {
                    $(".related_risk_err").css('color','red').text('Risk name not found.');
                  }
                  if (data.risk_level_id) {
                    /*$("#risk-level-hidden").val(data.risk_level_id);
                    $("#risk-level").val(data.risk_level_name);*/
                    riskLevel = '<option value="'+data.risk_level_id+'" selected="selected">'+data.risk_level_name+'</option>';

                  } else {
                    $(".level_err").css('color','red').text('Risk level not found.');
                  }
                  if (data.risk_category_id) {
                    /*$("#risk-category-hidden").val(data.risk_category_id);
                    $("#risk-category").val(data.risk_category_name);*/
                    riskCategory = '<option value="'+data.risk_category_id+'" selected="selected">'+data.risk_category_name+'</option>';

                  } else {
                    $(".category_err").css('color','red').text('Risk Category not found.');
                  }
                  if (data.risk_subcategory_id) {
                    /*$("#risk-subcategory-hidden").val(data.risk_subcategory_id);
                    $("#risk-subcategory").val(data.risk_subcategory_name);*/
                    riskSubCategory = '<option value="'+data.risk_subcategory_id+'" selected="selected">'+data.risk_subcategory_name+'</option>';

                  } else {
                    $(".subcategory_err").css('color','red').text('Risk subcategory not found.');
                  }
                } else  {
                  console.log('Error : '  + JSON.stringify(data));

                  $("#risk-category").val("");
                  $("#risk-subcategory").val('');
                  $("#risk-level").val('');
                  $("#related-risk").val('');

                  $('#risk_reference_number_err').text('Server data not found.');
                }
                $("#related-risk").append(riskName);
                $("#risk-level").append(riskLevel);
                $("#risk-category").append(riskCategory);
                $("#risk-subcategory").append(riskSubCategory);
            },
              error:function(data){
                  console.log("error occured"); //===Show Error Message====
                  // spinner.hide();
              }
        });
    });
});

/*$(document).ready(function() {
  $("#eventForm").on('submit', function(e){
    spinner.show();
  });    
});*/

    $(document).ready(function(){
       $("#estimated-loss").focus(function() {
            if (this.setSelectionRange) {
                var len = $(this).val().length;
                this.setSelectionRange(len, len);
            } else {
                $(this).val($(this).val());
            }
        });
        $("#risk_reference_number").focus();
    });

    @if(!empty($status))
        $('#status').val('{{$status}}');
    @endif

    buttonid = '';
    $("button.button_click").click(function (event) {
      var button = event.target;
      buttonid = button.id;

      if(buttonid != 'save-draft') {
        $("#eventForm").validate({
            rules: {
                unit: {
                    required: true
                },
                incident_desc:{
                    required:true
                },
                risk_category:{
                    required:true
                },
                risk_subcategory:{
                    required:true
                },
                risk_level:{
                    required:true
                },
                estimated_loss:{
                  required:true,
                  minlength:3,
                  maxlength:10,
                  // number: true
                },
                first_date:{
                  required:true
                },
                last_date:{
                  required:true
                },
                discovery_date:{
                  required:true
                },
                closure_date:{
                  required:true
                },
                impact_date:{
                  required:true
                },
                settlement_date:{
                  required:true
                },
                root_cause:{
                  required:true
                },
                reported:{
                  required:true
                },
                remedy:{
                  required:true
                },
                customer_impact:{
                  required:true
                },
                incident_cause:{
                  required:true
                },
                @if(count($riskList) > 1)
                related_risk:{
                  required:true
                },
                @endif
                /*comments:{
                  required:true
                },*/
                status:{
                    required:true
                },
                risk_reference_number:{
                    required:true
                },
                /*files:{
                    required:true
                },*/
            },messages:{
                unit:"Please select the department.",
                incident_desc:"Please enter the incident description.",
                risk_category:"Please select the risk category.",
                risk_subcategory:"Please select the risk subcategory.",
                risk_level:"Please select the risk level.",
                estimated_loss: {
                  required: "Please enter the estimated/actual los",
                  minlength: "Estimated/actual loss have to enter at least 3 digit.",
                  maxlength: "Estimated/actual loss field not be greater then 10 digits",
                }, 
                first_date:"Please enter the first occurence date",
                last_date:"Please enter the last occurence date",
                discovery_date:"Please enter the discovery date",
                closure_date:"Please enter the closure date",
                impact_date:"Please enter the impact date",
                settlement_date:"Please enter the settlement date",
                root_cause:"Please enter the root cause",
                customer_impact:"Please select the option for customer impact",
                incident_cause:"Please enter the incident cause",
                reported:"Please enter whether the event iss reported internally or externally",
                remedy:"Please enter the remedy for prevention of recurrence",
                // comments:"Please enter the comments",
                status:"Please select the status of loss event.",
                risk_reference_number:"Please select risk reference number.",
                // files:"Please Select File.",
                related_risk:"Please select risks.",

            },errorPlacement: function(error, element) {
                $(element).parent("div").addClass('has-error');
                error.insertAfter(element);
            }
        });
      } else {

        $("#eventForm").validate({
            rules: {
                risk_reference_number:{
                    required:true
                },
            },messages:{
                risk_reference_number:"Please select risk reference number.",

            },errorPlacement: function(error, element) {
                $(element).parent("div").addClass('has-error');
                error.insertAfter(element);
            }
        });

      }
      
    });

    

    $('#save-draft').click(function(){
        $('input[name=is_draft]').val('1');
        $('#eventForm').submit();
    });

    function getRiskCategories(level){
        $.ajax({
            data:{},
            url:'{{url("risk_level/")}}'+level+'/categories',
            success:function(data){  },
            error:function(xhr,error,status){  }
        })
    }
</script>

@endsection