@extends('layouts.app')
@section('content')

<style>
.required{color:#f00}
.home_capital_direct-add span.invalid-feedback {
    position: absolute;
    bottom: 0px;
    font-size: 10px;
    font-weight: 400;
    white-space: initial;
    width: 250px;
    overflow: inherit;
    text-overflow: ellipsis;
    line-height: 12px;
}
.payment-proc-cls{
    display: none;
}
#payment_processed_block input{
    font-size: 13px;
}
#payment_processed_block{
    position: relative;
}
#payment_processed_block svg{
    width: 18px;
    height: 18px;
    position: absolute;
    top: 48px;
    cursor: pointer;
    right: 23px;
}
div#payment_processed_block:before {
    position: absolute;
    content: '';
    top: 32px;
    z-index: 99;
    right: 46px;
    border-right: 1px solid black;
    height: 51px;
}
.smaller-style{
    width: 74% !important;
    display: flex;
}
.smaller-style svg{
    max-width: 18px;
    margin-left: 8px;
}
@media screen and (min-width:1920px){
    div#payment_processed_block:before {
        top: 36px;
    }
    #payment_processed_block svg {
        top: 52px;
    }
}

.required_element{
    border: 1px solid red !important;
}

</style>
<div class="page-container">
   <div class="main-content">
      <div class="home_capital_direct-add home_capital_direct-edit p-5 ml-5 mr-4">
         <h3 class="text-center">Edit Shortages </h3>
         <div class="bg-white p-5 mt-5 rounded shadow-sm">
		  @if($data!=null)
		 <form method="POST" action="{{route('updatepayroll', $data->id)}}" id="payroll_form" enctype="multipart/form-data">
         {{ csrf_field() }}
         <input type="hidden" value="{{$data->id}}" name="payroll_id">
            <div class="row update-form1">
            <div class="col-sm-3">
                  <label>Reporting Person<span class="required"> * </span></label>
                  <input name="reporting_person" id="reporting_person" class="form-control @error('reporting_person') is-invalid @enderror" type="text" value="{{ $data->reporting_person}}" placeholder="Write a Name" required/>
                  @error('reporting_person')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
               </div>
               <div class="col-sm-3">
                  <label>Reported Date <span class="required"> * </span></label>
                  <input name="reported_date" id="reported_date" class="form-control @error('reported_date') is-invalid @enderror" type="date" value="{{$data->reported_date }}" max="2025-07-12" required/>
               </div>
               <!--<div class="col-sm-3">-->
               <!-- <label>Depot</label>-->
               <!-- <select name="depot" id="depot" class="form-control @error('depot') is-invalid @enderror" required>-->
               <!--     <option value="Melksham" @if ( $data->depot == "Melksham") {{ 'selected' }} @endif>Melksham</option>-->
               <!--     <option value="Fradley Park" @if ($data->depot == "Fradley Park") {{ 'selected' }} @endif>Fradley Park</option>-->
               <!--     <option value="Leeds" @if ($data->depot == "Leeds") {{ 'selected' }} @endif>Leeds</option>-->
               <!--  </select>-->
               <!--   @error('depot')-->
               <!--         <span class="invalid-feedback" role="alert">-->
               <!--             <strong>{{ $message }}</strong>-->
               <!--         </span>-->
               <!--     @enderror-->
               <!--</div>-->
               @if(Auth::user()->roll_id == 0)
               <div class="col-sm-3">
                  <label>Transport Hub<span class="required"></span></label>
                  <select name="transport_hub" id="transport_hub" class="form-control">
                    <option value="">Select a value</option>
                    <option value="Melksham" @if ( $data->reporting_depot == "Melksham") {{ 'selected' }} @endif>Melksham</option>
                    <option value="Fradley Park" @if ($data->reporting_depot == "Fradley Park") {{ 'selected' }} @endif>Fradley Park</option>
                    <option value="Leeds" @if ($data->reporting_depot == "Leeds") {{ 'selected' }} @endif>Leeds</option>
                  </select>
                  @error('reporting_depot')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
               </div>
               @elseif(Auth::user()->roll_id == 2 || Auth::user()->roll_id == 1)
                  <div class="col-sm-3">
                  <label>Transport Hub<span class="required"> * </span></label>
                  <select name="transport_hub" id="transport_hub" class="form-control @error('reporting_depot') is-invalid @enderror" required>
                      <option value="">Select a value</option>
                    <option value="Melksham" @if ( $data->reporting_depot == "Melksham") {{ 'selected' }} @endif>Melksham</option>
                    <option value="Fradley Park" @if ($data->reporting_depot == "Fradley Park") {{ 'selected' }} @endif>Fradley Park</option>
                    <option value="Leeds" @if ($data->reporting_depot == "Leeds") {{ 'selected' }} @endif>Leeds</option>
                  </select>
                  @error('reporting_depot')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
               </div>
               @endif
               <div class="col-sm-3">
                  <label>Customer Name:<span class="required"> * </span></label>
                  <input name="customer_name" id="customer_name" class="form-control @error('customer_name') is-invalid @enderror" type="text" value="{{ $data->customer_name}}" placeholder="Write customer name" required/>
                  @error('customer_name')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
               </div>
               <div class="col-sm-3 hide_real_estate solar_field">
                  <label>Customer Site<span class="required"> * </span></label>
                  <select name="customer_site" id="customer_site" class="form-control @error('customer_site') is-invalid @enderror" required>
                    <option value="RR" @if ( $data->customer_site == "RR") {{ 'selected' }} @endif>RR</option>
                   <option value="CR" @if ( $data->customer_site == "CR") {{ 'selected' }} @endif>CR</option>
                   <option value="TD" @if ( $data->customer_site == "TD") {{ 'selected' }} @endif>TD</option>
                   <option value="WT" @if ( $data->customer_site == "WT") {{ 'selected' }} @endif>WT</option>
                   <option value="SH" @if ( $data->customer_site == "SH") {{ 'selected' }} @endif>SH</option>
                   <option value="BG" @if ( $data->customer_site == "BG") {{ 'selected' }} @endif>BG</option>
                   <option value="DS" @if ( $data->customer_site == "DS") {{ 'selected' }} @endif>DS</option>
                   <option value="VT" @if ( $data->customer_site == "VT") {{ 'selected' }} @endif>VT</option>
                   <option value="FP" @if ( $data->customer_site == "FP") {{ 'selected' }} @endif>FP</option>
                   <option value="MM" @if ( $data->customer_site == "MM") {{ 'selected' }} @endif>MM</option>
                   <option value="DT" @if ( $data->customer_site == "DT") {{ 'selected' }} @endif>DT</option>
                   <option value="EL" @if ( $data->customer_site == "EL") {{ 'selected' }} @endif>EL</option>
                   <option value="HT" @if ( $data->customer_site == "HT") {{ 'selected' }} @endif>HT</option>
                   <option value="KD" @if ( $data->customer_site == "KD") {{ 'selected' }} @endif>KD</option>
                   <option value="LT" @if ( $data->customer_site == "LT") {{ 'selected' }} @endif>LT</option>
                   <option value="AW" @if ( $data->customer_site == "AW") {{ 'selected' }} @endif>AW</option>
                 </select>
                  @error('customer_site')
                        <span class="invalid-feedback" role="alert">
                            <strong>{{ $message }}</strong>
                        </span>
                    @enderror
               </div>
               <div class="col-sm-3 hide_real_estate solar_field">
                <label>UID<span class="required"> * </span></label>
                <input name="uid" id="uid" class="form-control @error('uid') is-invalid @enderror" type="number" value="{{ $data->uid }}" placeholder="UID" min="0" required/>
                @error('uid')
                      <span class="invalid-feedback" role="alert">
                          <strong>{{ $message }}</strong>
                      </span>
                  @enderror
             </div>
               <div class="col-sm-3 s">
                  <label>Doc Ref<span class="required"> * </span></label>
                  <input name="doc_ref" id="doc_ref" class="form-control" value="{{ $data->doc_ref}}" type="text" placeholder="" required/>
               </div>
               <div class="col-sm-3 s">
                  <label>Delivery Date<span class="required"> * </span></label>
                  <input name="delivery_date" id="delivery_date" class="form-control" value="{{ $data->delivery_date}}" type="date" placeholder="" min="2025-07-12" required/>
               </div>
               <div class="col-sm-3" id="wcl_participation_block">
                  <label>Reasons<span class="required"> * </span></label>
                  <select name="reason" id="reason" class="form-control @error('reason') is-invalid @enderror" required>

                    <option value="BIT" @if ( $data->reason == "BIT") {{ 'selected' }} @endif>BIT</option>
                    <option value="BIW" @if ($data->reason == "BIW") {{ 'selected' }} @endif>BIW</option>
                    <option value="DAMAGED" @if ($data->reason == "DAMAGED") {{ 'selected' }} @endif>DAMAGED</option>
                    <option value="LIT" @if ($data->reason == "LIT") {{ 'selected' }} @endif>LIT</option>
                    <option value="LIW" @if ($data->reason == "LIW") {{ 'selected' }} @endif>LIW</option>
                    <option value="MISPICK" @if ($data->reason == "MISPICK") {{ 'selected' }} @endif>MISPICK</option>
                    <option value="NLW" @if ($data->reason == "NLW") {{ 'selected' }} @endif>NLW</option>
                    <option value="NON ARRIVAL" @if ($data->reason == "NON ARRIVAL") {{ 'selected' }} @endif>NON ARRIVAL</option>
                    <option value="OVERS" @if ($data->reason == "OVERS") {{ 'selected' }} @endif>OVERS</option>
                    <option value="SHORT" @if ($data->reason == "SHORT") {{ 'selected' }} @endif>SHORT</option>
                 </select>
               </div>
               <div class="col-sm-3" id="wcl_participation_block">
                  <label>Status<span class="required"> * </span></label>
                  <select class="payroll-select-main" name="status" id="update_option" required>
                    <option value="Open"@if ($data->status == "Open") {{ 'selected' }} @endif>Open</option>
                    <option value="Pending"@if ($data->status == "Pending") {{ 'selected' }} @endif>Pending</option>
                    <option value="Under-Investigation"@if ($data->status == "Under-Investigation") {{ 'selected' }} @endif>Under-Investigation</option>
                    <option value="Closed"@if ($data->status == "Closed") {{ 'selected' }} @endif>Closed</option>
                </select>
               </div>
                <div class="col-sm-3">
                  <label>Image 1</label>
                  <input id="image" type="file" name="image" class="input-file"accept="image/*">
               </div>
               @if($data->image)
               <img src="{{ asset('Shortages/'.$data->image) }}" style="height: 50px;margin-top: 31px;" ;="" width="100px">
               @endif
               <div class="col-sm-3">
                  <label>Image 2</label>
                  <input id="image" type="file" name="image2" class="input-file"accept="image/*">
               </div>
               @if($data->image2)
               <img src="{{ asset('Shortages/'.$data->image2) }}" style="height: 50px;margin-top: 31px;" ;="" width="100px">
               @endif
               <div class="col-sm-3">
                  <label>Image 3</label>
                  <input id="image" type="file" name="image3" class="input-file"accept="image/*">
               </div>
               @if($data->image3)
               <img src="{{ asset('Shortages/'.$data->image3) }}" style="height: 50px;margin-top: 31px;" ;="" width="100px">
               @endif
            <div class="row" id="customFields"  style="margin-left: 2px;">
                <div class="col-sm-2">
                    <label>Product Code<span class="required custo1"> * </span></label>
                    <input name="product_code[]" id="product_code" class="form-control @error('product_code') is-invalid @enderror" value="{{ old('product_code') }}" type="text" placeholder=""/>
                    @error('product_code')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                 </div>
                 <div class="col-sm-2">
                    <label>Product Description<span class="required custo1"> * </span></label>
                    <input name="product_description[]" id="product_description" class="form-control @error('product_description') is-invalid @enderror" value="{{ old('product_description') }}" type="text" placeholder="" />
                    @error('product_description')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                 </div>

                 <div class="col-sm-2">
                    <label>Pack Size<span class="required custo1"> * </span></label>
                    <input type="text" id="pack_size[]"  name="pack_size[]" class="form-control @error('pack_size') is-invalid @enderror" value="{{ old('pack_size') }}" />
                    @error('pack_size')
                    <span class="invalid-feedback" role="alert">
                        <strong>{{ $message }}</strong>
                    </span>
                @enderror
                 </div>
                 <div class="col-sm-2">
                    <label>Cases<span class="required custo1"> * </span></label>
                    <input type="number" id="cases"  name="cases[]" class="form-control @error('cases') is-invalid @enderror" value="{{ old('cases') }}" min="0" />
                    @error('cases')
                          <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                          </span>
                      @enderror
                 </div>
                 <div class="col-sm-2">
                    <label>Bottles<span class="required custo1"> * </span></label>
                    <input id="bottles" name="bottles[]" class="form-control @error('bottles') is-invalid @enderror" type="number" value="{{ old('bottles') }}" placeholder="" min="0" />
                    @error('bottles')
                          <span class="invalid-feedback" role="alert">
                              <strong>{{ $message }}</strong>
                          </span>
                      @enderror
                 </div>
                 <div class="col-sm-2">
                    <a href="javascript:void(0);" class="addCF btn btn-primary" style="margin-top: 34px;border-radius: 5px !important;padding: 6px !important;">Add More</a>
                 </div>
                 @foreach($data->product as $val)
                 <div class="row hehe" style="margin-left: 2px;">
                    <div class="col-sm-2">
                        <label>Product Code<span class="required">  </span></label>
                        <input type="hidden" name="product_id[]" value="{{$val->id}}">
                        <input name="product_code[]" id="product_code" class="form-control" value="{{$val->product_code}}" type="text" placeholder=""/>

                     </div>
                     <div class="col-sm-2">
                        <label>Product Description<span class="required">  </span></label>
                        <input name="product_description[]" id="product_description" class="form-control" value="{{$val->product_description }}" type="text" placeholder="" />

                     </div>

                     <div class="col-sm-2">
                        <label>Pack Size<span class="required">  </span></label>
                        <input type="text" id="pack_size"  name="pack_size[]" class="form-control" value="{{$val->pack_size }}" />

                     </div>
                     <div class="col-sm-2">
                        <label>Cases<span class="required">  </span></label>
                        <input type="number" id="cases"  name="cases[]" class="form-control" value="{{ $val->cases }}" min="0" />

                     </div>
                     <div class="col-sm-2">
                        <label>Bottles<span class="required">  </span></label>
                        <input id="bottles" name="bottles[]" class="form-control" type="number" value="{{$val->bottles }}" placeholder="" min="0" />

                     </div>
                     <div class="col-sm-2">
                        <a href="javascript:void(0);" class="remCF btn btn-danger" style="margin-top: 34px;border-radius: 5px !important;padding: 6px !important;">Remove</a>
                     </div>
                 </div>
                 @endforeach
            </div>
               <div class="col-sm-12">
                  <label>Comment<span class="required"> *</span></label>
                  @if(!empty($data->comment->comment))
                  <textarea name="comment" id="comment"  rows="5" required></textarea>
                  @error('comment')
                  <span class="invalid-feedback" role="alert">
                      <strong>{{ $message }}</strong>
                  </span>
              @enderror
                  @else
                  <textarea name="comment" id="comment"  rows="5"></textarea>
                  @endif
               </div>
               <div class="col-sm-12">
                   <label>Additional Comment<span class="required"> </span></label>
                  <textarea name="additional_comment" id="additional_comment"  rows="5" >{{ $data->additional_comment}}</textarea>
               </div>
        <div class="col-lg-12">

          <button type="submit" id="submitbtn" class="btn mb-3 btn-block btn-primary btn-lg border-0 mt-3" style="background-color: #243487!important; background-image: none !important;">
              <!----> Update
          </button>

        </div>
        </div>
			</form>
			 @endif
         </div>
      </div>
   </div>
</div>


<script src="{{ asset('js/bootstrap-datetimepicker.js') }}" defer></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

<script>
    $(document).ready(function() {
        $(".addCF").click(function() {
            var product_code =  $('#product_code').val();
            var product_description = $('#product_description').val();
            var pack_size = $('#pack_size').val();
            var cases = $('#cases').val();
            var bottles = $('#bottles').val();
            if (!product_code || !product_description ||!pack_size ||!cases ||!bottles) {
      alert("Please Fill All Fields");
                 return
             }
             var html = '<div class="row hehe" id="customFields" style="margin-left: 2px;"><div class="col-sm-2"><label>Product Code<span class="required">  </span></label><input name="product_code_' + product_code + '" class="form-control" id="customFieldName"  value="' + product_code + '" type="text" placeholder="" required/><input type="hidden" name="product_code[]" value=' + product_code + '></div>';
             html += '<div class="col-sm-2"><label>Product Description<span class="required">  </span></label><input name="product_description_' + product_description + '" id="customFieldName" class="form-control" value="' + product_description + '" type="text" placeholder="" required/><input type="hidden" name="product_description[]" value=' + product_description + '></div>';
             html += '<div class="col-sm-2"><label>Pack Size<span class="required">  </span></label><input type="text" id="customFieldName"  name="pack_size_' + pack_size + '" class="form-control" value="' + pack_size + '" required/><input type="hidden" name="pack_size[]" value=' + pack_size + '></div>';
             html += '<div class="col-sm-2"><label>Cases<span class="required">  </span></label><input type="number" id="customFieldName"  name="cases_' + cases + '" class="form-control" value="' + cases + '" min="0" required/><input type="hidden" name="cases[]" value=' + cases + '></div>';
             html += '<div class="col-sm-2"><label>Bottles<span class="required">  </span></label><input id="customFieldName" name="bottles_' + bottles + '" class="form-control" type="number" value="' + bottles + '" placeholder="" min="0" required/><input type="hidden" name="bottles[]" value=' + bottles + '></div><div class="col-sm-2"><a href="javascript:void(0);" class="remCF btn btn-danger" style="margin-top: 36px;">Remove</a></div></div>';
             
             
            $("#customFields").append(html);
          var product_code =  $("#product_code").val('');
            $("#product_description").val('');
            $("#pack_size").val('');
            $("#cases").val('');
            $("#bottles").val('');
            $('.custo1').css('display', 'none');
        });
        $("#customFields").on('click', '.remCF', function() {
            var rowCount = $('#customFields').find('.row').length;

  // Check if there are more than one rows present
  if (rowCount > 1) {
    $(this).parents('.hehe').remove();
  } else {
    alert('At least one record is required.');
  }
        });
    });
</script>

@endsection