@extends('layouts.template')

@section('content')
    
<section class="planinng-trip-allowance" id="accident-status">
<div class="container" style="width:100% !important;">
<div class="row">
<h1 class="heading">Accident and Traffic Violations 
<a href="{{ url('transport/dashboard') }}" title="back"><i class="fa fa-undo" aria-hidden="true"></i></a>
<span class="btn btn-danger" style="float: right;margin-right: 30px;padding: 0;">Total : {{ count($page_data['file_number']) }} not open files</span>

</h1>
@if(Session::has('flash_message'))
<div class="row-fluid">
<div class="span12">
  <p class="alert {{ Session::get('alert-class', 'alert-info') }}">{{ Session::get('flash_message') }}</p>
</div> 
</div>   
@endif

@permission('accident-create')
<div class="cargo-search">
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne">
  <h4 class="panel-title">
    <a class="table-heading" role="button" data-toggle="collapse" data-parent="#accordion" href="#collapseOne" aria-expanded="true" aria-controls="collapseOne">
    <i class="more-less glyphicon glyphicon-plus"></i>
    <h4>Accident and Traffic Violations</h4>
      </a>
  </h4>
</div>
<div id="collapseOne" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne">
   <div class="panel-body">
    <div style="float: right;padding: 10px;">
      <label class="switch">
        <input type="checkbox" class="changecheck">
        <span class="slider round"></span>
      </label>
    </div>
    
      @include ('transport.accident_traffic_detail.form')

   </div>
</div>
</div>
</div><!-- panel-group -->
</div>
@endpermission


@permission('accident-list')
<div class="cargo-search">
  <div class="panel-title">
  <div class="table-heading">
    <h4 class="col-md-3 col-sm-3 col-xs-12" style="padding-left:10px;">All Records</h4>
    <div class="col-md-9 col-sm-9 col-xs-12">
        {!! Form::open(['method' => 'GET', 'url' => '/transport/accident_traffic_detail', 'role' => 'search'])  !!}
          <span><input type="text" placeholder="search by file number, trip number ,truck , trailer, jurisdiction, violation ,location ,driver" name="search" id="" style="width: 60% !important;" > </span>
        {!! Form::close() !!}
      </div>
  </div>
  </div>
  <div class="cargo-search-form">
  <div class="table-responsive">
  <table class="table table-striped" id="my-table">
    <thead>
      <tr>
       <th>File Number</th>
       <th>Trip</th>
       <th>Truck</th>
       <th>Trailer</th>
       <th>Driver</th>
       <th>Insurance Name</th>
       <th>Notified</th>
       <th>Lawyer</th>
       <th>3rd Party Insurance</th>
       <th>Date</th>
       <th>Location</th>
       <th>Origin</th>
       <th>Destination</th>
       <th>Jurisdiction</th>
       <th>Violation</th>
       <th>Claim Amt USD</th>
       <th>Claim Amt MZM</th>
       <th>Claim Amt ZAR</th>
       <th>Status</th>
       <th>Details</th>
      </tr>
    </thead>
    <tbody>
      
      @foreach($accident as $item)
      <tr>
          <td>{{ $item->file_number }}</td>
          <td>{{ $item->trip_number }}</td>
          <td>@if($item->planning_id !=''){{ $item->planning['truck'] }}@endif</td>
          <td>@if($item->planning_id !=''){{ $item->planning['trailer'] }}@endif</td>
          <td>{{ $item->driver }}</td>
          <td>{{ $item->insurance_name }}</td>
          <td>{{ Helper::convert_to_ddmmyy($item->notify_date) }}</td>
          <td>{{ $item->lawyer }}</td>
          <td>{{ $item->third_party_name }}</td>
          <td>{{ Helper::convert_to_ddmmyy($item->date) }}</td>
          <td>{{ $item->location }}</td>
          <td>@if($item->planning_id !=''){{ $item->planning->cargo->order->origin['origin'] }}@endif</td>
          <td>@if($item->planning_id !=''){{ $item->planning->cargo->order->destination['destination'] }}@endif</td>
          <td>{{ $item->jurisdiction }}</td>
          <td>{{ $item->violation }}</td>
          <td>{{ $item->claim_amount_usd }}</td>
          <td>{{ $item->claim_amount_mzm }}</td>
          <td>{{ $item->claim_amount_zar }}</td>
          <td>
            @if($item->status == 'Case_Open')<p class="Waiting-to-load">Case Open</p>@endif
            @if($item->status == 'Case_Close')<p class="Delivered">Case Close</p>@endif
            @if($item->status == 'Fine_Receive')<p class="Received">Fine Received</p>@endif
            @if($item->status == 'Fine_Paid')<p class="Delivered">Fine Paid</p>@endif
            @if($item->status == 'Awaiting_Sentence')<p class="Loaded">Awaiting Sentence</p>@endif
            @if($item->status == 'Received_Sentence')<p class="Loaded">Received Sentence</p>@endif
            @if($item->status == 'At_Police')<p class="Waiting-to-load">At Police</p>@endif
            @if($item->status == 'At_Attorney_General')<p class="Waiting-to-load">At Attorney General</p>@endif
            @if($item->status == 'At_Court')<p class="Loaded">At Court</p>@endif
          </td>
          <td><button class="details_tab btn btn-warning" data-id="{{ $item->id }}" data-filenumber="{{ $item->file_number }}" data-trip="{{ $item->trip_number }}" data-truck="{{ $item->planning['truck'] }}" data-driver="{{ $item->planning['driver'] }}" data-lawyer="{{ $item->lawyer }}" data-article="{{ $item->article }}"><i class="fa fa-eye"></i></button></td>
          <!-- <td class="icon-elements">
              <a href="{{ url('/transport/accident_traffic_detail/' . $item->id . '/edit') }}" title="Edit Accident_Traffic_detail"><button class="btn btn-primary btn-xs"><i class="fa fa-pencil-square-o" aria-hidden="true"></i> Edit</button></a>
              {!! Form::open([
                  'method'=>'DELETE',
                  'url' => ['/transport/accident_traffic_detail', $item->id],
                  'style' => 'display:inline'
              ]) !!}
              {!! Form::button('<i class="fa fa-trash-o" aria-hidden="true"></i> Delete', array(
                  'type' => 'submit',
                  'class' => 'btn btn-danger btn-xs',
                  'title' => 'Delete Accident_Traffic_detail',
                  'onclick'=>'return confirm("Confirm delete?")'
              )) !!}
              {!! Form::close() !!}
          </td> -->
      </tr>
      @endforeach

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

  <div class="clearfix"></div>

  </div>
</div>
@endpermission

<div class="cargo-search">
<div class="tools-control-table status-table">
<div class="panel with-nav-tabs panel-default">
    <div class="panel-heading table-heading">
      <ul class="nav nav-tabs">
        <li class="active"><a href="#accident_status" data-toggle="tab"> Status </a></li>
        <li><a href="#insurance" data-toggle="tab">Insurance</a></li>
        <li><a href="#contacts" data-toggle="tab">Contacts & Reports</a></li>
        <li><a href="#claim" data-toggle="tab">Claim</a></li>
      </ul>
    </div>
    <div class="panel-body">
      <div class="tab-content">

        <div class="tab-pane fade in active" id="accident_status">
            <div class="col-md-12">
              {!! Form::open(['method' => 'POST', 'url' => '/transport/accident_traffic_detail/save_status'])  !!} 
              <div class="row">
                  <div class="form-border">
                    <div class="form-group col-md-2">
                      <input type="hidden" class="accident_traffic_detail_id form-control" name="accident_traffic_detail_id" readonly="true">
                      <input type="text" class="file_number form-control" name="file_number" readonly="true">
                    </div>
                    <div class="form-group col-md-2">
                      <input type="text" class="trip_number form-control" name="trip_number" readonly="true">
                    </div>
                    <div class="form-group col-md-2">
                      <input type="text" class="truck form-control" name="truck" readonly="true">
                    </div>
                    <div class="form-group col-md-2">
                      <input type="text" class="driver form-control" name="driver" readonly="true">
                    </div>
                    <div class="form-group col-md-2">
                      <input type="text" class="lawyer form-control" name="lawyer" readonly="true">
                    </div>
                    <div class="form-group col-md-2">
                      <input type="text" class="date form-control calender-icon" name="status_date" placeholder="Enter Date" id="datepicker3" required="">
                    </div>
                    <div class="form-group col-md-2">
                      <select class="form-control" name="status">
                        <option value="Case_Open">Case Open</option>
                        <option value="Case_Close">Case Close</option>
                        <option value="Fine_Receive">Fine Received</option>
                        <option value="Fine_Paid">Fine Paid</option>
                        <option value="Awaiting_Sentence">Awaiting Sentence</option>
                        <option value="Received_Sentence">Received Sentence</option>
                        <option value="At_Police">At Police</option>
                        <option value="At_Attorney_General">At Attorney General</option>
                        <option value="At_Court">At Court</option>
                      </select> 
                    </div>
                    <div class="form-group col-md-2">
                      <input type="text" class="form-control" name="remark" placeholder="Enter Remark" required="">
                    </div>
                    <div class="form-group col-md-2">
                    <input type="submit" class="form-control btn btn-success" value="ADD">
                  </div>
                </div>
              </div>
              {!! Form::close() !!}
            </div>
            <div class="col-md-12">
              <div class="row">
                <div class="table-heading">
                  <h4 class="col-md-6 col-sm-6 col-xs-6">Log</h4>
                </div>
                <div class="table-responsive tableContainer" id="status-log-table tableContainer">
                  <table class="table scrollTable">
                    <thead class="fixedHeader">
                      <tr>
                        <th width="12.5%">File No</th>
                        <th width="12.5%"">Trip</th>
                        <th width="12.5%">Truck</th>
                        <th width="12.5%">Driver</th>
                        <th width="12.5%">Lawyer</th>
                        <th width="12.5%">Date</th>
                        <th width="12.5%">Status</th>
                        <th width="12.5%">Remark</th>
                      </tr>
                    </thead>
                    <tbody class="status scrollContent">
                    </tbody>
                  </table>
                </div>
              </div>
            </div>
        </div>

        <div class="tab-pane fade" id="insurance"> 
          <div class="col-md-6">
              {!! Form::open(['method' => 'POST', 'url' => '/transport/accident_traffic_detail/save_insurance'])  !!} 
              <div class="row">
                  <div class="form-border">
                    <div class="form-group col-md-4">
                      <input type="hidden" class="accident_traffic_detail_id form-control" name="accident_traffic_detail_id" readonly="true">
                      <input type="text" class="form-control" name="insurance_company" placeholder="Enter Insurance Company" required="">
                    </div>
                    <div class="form-group col-md-4">
                      <input type="text" class="form-control" name="policy_number" placeholder="Enter Policy Number" required="">
                    </div>
                    
                    <div class="form-group col-md-4">
                      <input type="text" class="form-control" name="expiry" id="datepicker4" placeholder="Enter Expiry" required="">
                    </div>
                     <div class="form-group col-md-4">
                      <input type="text" class="form-control" name="notify" id="datepicker5" placeholder="Enter Notified Date" required="">
                    </div>

                    <!-- <div class="form-group col-md-4">
                      <select class="form-control" name="insurance_type">
                        <option value="Own">Own</option>
                        <option value="Other_Party">Other Party</option>
                      </select> 
                    </div> -->

                    <div class="form-group col-md-4">
                    <input type="submit" class="form-control btn btn-success" value="ADD">
                  </div>
                </div>
              </div>
              {!! Form::close() !!}
          </div>
          <div class="col-md-6">
              <div class="row">
                <div class="table-heading">
                  <h4 class="col-md-6 col-sm-6 col-xs-6">Log</h4>
                </div>
                <div class="table-responsive tableContainer" id="status-log-table tableContainer">
                  <table class="table scrollTable">
                    <thead class="fixedHeader">
                      <tr>
                        <th width="25%">Insurance Company</th>
                        <th width="25%"">Policy Number</th>
                        <th width="25%">Expiry Date</th>
                        <th width="25%">Notified</th>
                      </tr>
                    </thead>
                    <tbody class="insurancedata scrollContent">
                    </tbody>
                  </table>
                </div>
              </div>
          </div> 
        </div>

        <div class="tab-pane fade" id="contacts">
          {!! Form::open(['method' => 'POST', 'url' => '/transport/accident_traffic_detail/save_contact', 'class' => 'form-vertical'])  !!}
          <div class="row">
            <div class="col-md-7 col-sm-7 col-xs-12">
              <table class="table">
                <thead>
                  <tr>
                    <th>Date</th>
                    <th>Contact Type</th>
                    <th>Contact Detail</th>
                    <th>Report Type</th>
                  </tr>
                </thead>
                <tbody>
                  <tr>
                    <td>
                  <input type="hidden" class="accident_traffic_detail_id form-control" name="accident_traffic_detail_id" readonly="true">  <input type="text" class="contact_date form-control" name="date" id="datepicker6" required="">
                    </td>
                    <td>
                      <select class="contact_type form-control" name="contact_type">
                        <option value="3_Party">3 Party</option>
                        <option value="Police">Police</option>
                        <option value="Surveyor">Surveyor</option>
                        <option value="Driver">Driver</option>
                      </select> 
                    </td>
                    <td>
                      <input type="text" class="contact_detail form-control" name="contact_detail" required="">
                    </td>
                    <td>
                      <select class="report_type form-control" name="report_type">
                        <option value="Police_Report">Police Report</option>
                        <option value="Surveyor_Report">Surveyor Report</option>
                        <option value="Driver_Report">Driver Report</option>
                      </select> 
                    </td>
                  </tr>
                </tbody>
              </table>
              <div class="remark-form">
                <div class="form-group">
                  <div class="col-md-12 col-sm-12 col-xs-12" style="padding: 10px;">
                    <label for="remark" style="color:black;">Report</label>
                    <textarea class="report form-control textarea-box" rows="3" name="report" required></textarea>
                  </div>
                </div>
                <div class="form-group">
                  <div class="col-md-12 col-sm-12 col-xs-12">
                    <input type="submit" class="col-md-3 btn btn-success" value="Save" style="float:right;">
                  </div>
                </div>
              </div>
            </div>
            <div class="col-md-5 col-sm-5 col-xs-12">
              <div class="table-heading">
                <h4 class="col-md-6 col-sm-6 col-xs-6">Log</h4>
              </div>
              <div class="tableContainer" style="height: 220px !important;">
                <div class="contactdata scrollContent" style="height: 220px !important;padding: 10px;">
                </div>  
              </div>
            </div>

          </div>
  
          <div class="row">
            
          </div>
          {!! Form::close() !!}
        </div>

        <div class="tab-pane fade" id="claim"> 
          <div class="col-md-6">
              {!! Form::open(['method' => 'POST', 'url' => '/transport/accident_traffic_detail/save_claim','files' => true])  !!} 
              <div class="row">
                  <div class="form-border">
                    <div class="form-group col-md-4">
                      <select class="form-control" name="violation">
                        <option value="Accident">Accident</option>
                        <option value="Theft">Theft</option>
                        <option value="Fines">Fines</option>
                      </select> 
                    </div>

                    <div class="form-group col-md-4">
                      <input type="hidden" class="accident_traffic_detail_id form-control" name="accident_traffic_detail_id" readonly="true">
                      <input type="text" class="article form-control" name="article" placeholder="Enter Article" readonly="">
                    </div>

                    <div class="form-group col-md-4">
                      <input type="text" class="form-control" name="date" id="datepicker7" placeholder="Enter Date" required="">
                    </div>

                    <div class="form-group col-md-4">
                      <input type="text" class="form-control" name="usd" placeholder="Enter USD">
                    </div>

                    <div class="form-group col-md-4">
                      <input type="text" class="form-control" name="mzm" placeholder="Enter MZM">
                    </div>

                    <div class="form-group col-md-4">
                      <input type="text" class="form-control" name="zar" placeholder="Enter ZAR">
                    </div>

                    <div class="form-group col-md-4">
                      <input type="text" class="form-control" name="remark" placeholder="Enter Remark" required="">
                    </div>

                    <div class="form-group col-md-4">
                      <input type="file" class="form-control" name="file">
                    </div>

                    <div class="form-group col-md-4">
                      <input type="submit" class="form-control btn btn-success" value="ADD">
                    </div>
                </div>
              </div>
              {!! Form::close() !!}
          </div>
          <div class="col-md-6">
              <div class="row">
                <div class="table-heading">
                  <h4 class="col-md-6 col-sm-6 col-xs-6">Log</h4>
                </div>
                <div class="table-responsive tableContainer" id="status-log-table tableContainer">
                  <table class="table scrollTable">
                    <thead class="fixedHeader">
                      <tr>
                        <th width="12.5%">Violation</th>
                        <th width="12.5%">Article</th>
                        <th width="12.5%">Date</th>
                        <th width="12.5%">USD</th>
                        <th width="12.5%">ZAR</th>
                        <th width="12.5%">MZM</th>
                        <th width="12.5%">Remark</th>
                        <th width="12.5%">File</th>
                      </tr>
                    </thead>
                    <tbody class="claim scrollContent">
                    </tbody>
                    <tfoot class="fixedHeader claimfooter">
                       
                    </tfoot>
                  </table>
                </div>
              </div>
          </div> 
        </div>

      </div>
    </div>
</div>
</div>
</div>
</div>
</div>
</section>
 <!--date picker-->
<link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css">
<script>
  $(function() {

    $('.new').hide();
    $('.changecheck').change(function(e){
      if($(this).is(':checked')){
        $('.old').hide();
        $('.new').show();
      }
      else
      {
        $('.old').show();
        $('.new').hide();  
      }
    });
    
    $("#datepicker2").datepicker({ dateFormat: 'yy-mm-dd' });
    $("#datepicker3").datepicker({ dateFormat: 'yy-mm-dd' });
    $("#datepicker4").datepicker({ dateFormat: 'yy-mm-dd' });
    $("#datepicker5").datepicker({ dateFormat: 'yy-mm-dd' });
    $("#datepicker7").datepicker({ dateFormat: 'yy-mm-dd' });
    $("#datepicker6").datepicker({ dateFormat: 'yy-mm-dd' });
    $("#datepicker8").datepicker({ dateFormat: 'yy-mm-dd' });


    $('#myform').validate( {
        highlight: function(element) {
            $(element).closest('.form-group').addClass('has-error');
            $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
            $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        focusInvalid: false, // do not focus the last invalid input
        ignore: "", // validate all fields including form hidden input
        rules: {
          'file_number': {
            required: true,
          },
          'jurisdiction': {
            required: true,
          },
          'trip_number': {
            required: true,
          },
          'violation': {
            required: true,
          },
          'date' : {
            required : true,
          },
          'location' : {
            required : true,
          },
        },
        errorPlacement: function (error, element) {
          if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
          } else {
            error.insertAfter(element);
          }
        },
        messages: {
          'file_number' : {
            required: "The file number is required",
          },
          'jurisdiction' : {
            required: "field is required",
          },
          'trip_number' : {
            required: "The trip number is required",
          },
          'violation' : {
            required: "The violation is required",
          },
          'date' : {
            required: "The date is required",
          },
          'location' : {
            required: "The location is required",
          },
        },
        focusInvalid: false,
        invalidHandler: function(form, validator) {
          if (!validator.numberOfInvalids())
            return false;
          $('html, body').animate({
            scrollTop: $(validator.errorList[0].element).offset().top
          }, 2000);
        }
    });

    $('#newform').validate( {
        highlight: function(element) {
          $(element).closest('.form-group').addClass('has-error');
          $(element).closest('.form-group').addClass('has-error');
        },
        unhighlight: function(element) {
          $(element).closest('.form-group').removeClass('has-error');
        },
        errorElement: 'span',
        errorClass: 'help-block',
        focusInvalid: false, // do not focus the last invalid input
        ignore: "", // validate all fields including form hidden input
        rules: {
          'file_number': {
            required: true,
          },
          'jurisdiction': {
            required: true,
          },
          'trip_number': {
            required: true,
          },
          'driver': {
            required: true,
          },
          'violation': {
            required: true,
          },
          'date' : {
            required : true,
          },
          'location' : {
            required : true,
          },
        },
        errorPlacement: function (error, element) {
          if(element.parent('.input-group').length) {
            error.insertAfter(element.parent());
          } else {
            error.insertAfter(element);
          }
        },
        messages: {
          'file_number' : {
            required: "The file number is required",
          },
          'jurisdiction' : {
            required: "field is required",
          },
          'trip_number' : {
            required: "The trip number is required",
          },
          'driver' : {
            required: "field is required",
          },
          'violation' : {
            required: "field is required",
          },
          'date' : {
            required: "The date is required",
          },
          'location' : {
            required: "The location is required",
          },
        },
        focusInvalid: false,
        invalidHandler: function(form, validator) {
            if (!validator.numberOfInvalids())
              return false;
            $('html, body').animate({
              scrollTop: $(validator.errorList[0].element).offset().top
            }, 2000);
        }
    });
  });
</script>
<script type="text/javascript">
  function toggleIcon(e) {
    $(e.target)
      .prev('.panel-heading')
      .find(".more-less")
      .toggleClass('glyphicon-plus glyphicon-minus');
  }
  $('.panel-group').on('hidden.bs.collapse', toggleIcon);
  $('.panel-group').on('shown.bs.collapse', toggleIcon);
</script> 
<script type="text/javascript">

  $(".details_tab").click(function(e){

    $(this).closest("tr").siblings().removeClass("diffColor");
    $(this).parents("tr").toggleClass("diffColor", this.clicked);

    $(".status-table").hide();
    $(".status-table").show("slow").addClass("slideInLeft");

    var id = $(this).data('id');
    var file_number = $(this).data('filenumber');
    var trip_number = $(this).data('trip');
    var truck       = $(this).data('truck');
    var driver      = $(this).data('driver');
    var lawyer      = $(this).data('lawyer');
    var article     = $(this).data('article');

    $('.file_number').val(file_number);
    $('.accident_traffic_detail_id').val(id);
    $('.trip_number').val(trip_number);
    $('.truck').val(truck);
    $('.driver').val(driver);
    $('.lawyer').val(lawyer);
    $('.article').val(article);

    // Status List
    $.ajax({
      url: "{{URL::to('transport/accident_traffic_detail/getStatus')}}",
      type: 'POST',
      dataType: 'json',
      data: {'id': id, '_token': '{{csrf_token()}}'},
      success: function (status) {
        if(status.data !=''){
          $('.status').html('');
          $.each(status.data, function (index,value) {
            $('.status').append('<tr><td width="12.5%">'+file_number+'</td><td width="12.5%">'+trip_number+'</td><td width="12.5%">'+truck+'</td><td width="12.5%">'+driver+'</td><td width="12.5%">'+lawyer+'</td><td width="12.5%">'+convert_to_ddmmyy(value.status_date)+'</td><td width="12.5%">'+value.status+'</td><td width="12.5%">'+value.remark+'</td></tr>');
          });   
          
        }else{
          $('.status').html('');
          $('.status').append('<tr><td width="100%" colspan="5">No Data Found</td></tr>');
        }
      }
    });

    // Contact list
    $.ajax({
      url: "{{URL::to('transport/accident_traffic_detail/getContact')}}",
      type: 'POST',
      dataType: 'json',
      data: {'id': id, '_token': '{{csrf_token()}}'},
      success: function (response) {
        if(response.data)
        {
          $('.contactdata').html('');
          $.each(response.data, function (index,value) {
            $('.contactdata').append('<div style="width:100%;color:black;">'+value.contact_type+' , '+convert_to_ddmmyy(value.date)+' , Contact : '+value.contact_detail+' , '+value.report_type+'</div><div style="width:100%;color:black;"> Report : '+value.report+'</div><hr/>');
          });   
          
        }
        else
        {
          $('.contactdata').html('');
          $('.contactdata').append('<tr><td width="100%" colspan="4">No Data Found</td></tr>');
        }
      }
    });

    // Insurance List
    $.ajax({
      url: "{{URL::to('transport/accident_traffic_detail/getInsurance')}}",
      type: 'POST',
      dataType: 'json',
      data: {'id': id, '_token': '{{csrf_token()}}'},
      success: function (insurance) {
        if(insurance.data !=''){
          $('.insurancedata').html('');
          $.each(insurance.data, function (index,value) {
            $('.insurancedata').append('<tr><td width="25%">'+value.insurance_company+'</td><td width="25%">'+value.policy_number+'</td><td width="25%">'+convert_to_ddmmyy(value.expiry)+'</td><td width="25%">'+convert_to_ddmmyy(value.notify)+'</td></tr>');
          });   
          
        }else{
          $('.insurancedata').html('');
          $('.insurancedata').append('<tr><td width="100%" colspan="5">No Data Found</td></tr>');
        }
      }
    });

    // Claim List
    $.ajax({
      url: "{{URL::to('transport/accident_traffic_detail/getClaim')}}",
      type: 'POST',
      dataType: 'json',
      data: {'id': id, '_token': '{{csrf_token()}}'},
      success: function (claim) {
        var usd = claim.usd;
        var mzm = claim.mzm;
        var zar = claim.zar;

        if(claim.data !=''){
          $('.claim').html('');
          $('.claimfooter').html('');
          $.each(claim.data, function (index,value) {
            if(value.file !='')
            {
                $('.claim').append('<tr><td width="12.5%">'+value.violation+'</td><td width="12.5%">'+value.article+'</td><td width="12.5%">'+convert_to_ddmmyy(value.date)+'</td><td width="12.5%">'+value.usd+'</td><td width="12.5%">'+value.zar+'</td><td width="12.5%">'+value.mzm+'</td><td width="12.5%">'+value.remark+'</td><td width="12.5%"><a target="_blank" href="{{ url("files/") }}/'+value.file+'">View</a></td></tr>');
            }
            else
            {
                $('.claim').append('<tr><td width="12.5%">'+value.violation+'</td><td width="12.5%">'+value.article+'</td><td width="12.5%">'+convert_to_ddmmyy(value.date)+'</td><td width="12.5%">'+value.usd+'</td><td width="12.5%">'+value.zar+'</td><td width="12.5%">'+value.mzm+'</td><td width="12.5%">'+value.remark+'</td><td width="12.5%">-</td></tr>');
            }
            
          });

          $('.claimfooter').append('<tr><th></th><th></th><th></th><th><b>Total</b></th><th><b>USD : '+usd.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +'</b></th><th><b>ZAR : '+zar.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +'</b></th><th><b>MZM : '+mzm.toString().replace(/\B(?=(\d{3})+(?!\d))/g, ",") +'</b></th></tr>');   
          
        }else{
          $('.claim').html('');
          $('.claim').append('<tr><td width="100%" colspan="7">No Data Found</td></tr>');
          $('.claimfooter').html('');
        }
      }
    });

  });

  $('#file_number').change(function(){
    var file_number = $(this).val();
    if (file_number != '') {
      $.ajax({
        url: "{{URL::to('transport/accident_traffic_detail/getRoadData')}}",
        type: 'POST',
        dataType: 'json',
        data: {'file_number': file_number, '_token': '{{csrf_token()}}'},
        success: function (response) {  
          $('#trip_number').val(response.data.trip_number);
          $('#violation').val(response.data.detail);
          $('#date').val(response.data.date);
          $('#location').val(response.data.location);
          $('#driver').val(response.driver); 
          $('#planning_id').val(response.data.planning_id);
          $('#article').val(response.data.article);
        }
      });
    }
    else
    {
      $('#trip_number').val('');
      $('#violation').val('');
      $('#date').val('');
      $('#location').val('');
      $('#planning_id').val('');
      $('#article').val('');
    }
  });

</script>
@endsection