@extends('layouts.app')

@section('content')

<div class="row mt-2">
    <div class="col"></div>

    <div class="col-10 minheight">
      <div class="widgets">
      <div class="float-left w-100 line" style="margin-bottom: 1rem;">
          <h4 class="pt-2" style="display:inline-block;"> <img style='width: 24px' src='/fonts/container.svg'/> Create {{strtoupper($data['type'])}} Enquiry </h4>   <span style="color: #8f8f8f; display:inline-block; margin-left: 5px;"><small> ({{$data['city']->name}}) </small></span>
          <div class="orderno iqno pt-4"> IQ# {{$data['enquiry_no']}} </div>
      </div>


      <div class="container">
          <div class="row d-flex justify-content-center">
              <div class="col-md-12">
                  <div class="wizard">
                    <div class="viewbuttons float-right w-100 mb-3">
                      <a class="btn btn-outline-dark btn-sm float-right" href="/shipper"> <i class="fa-solid fa-angle-left"></i> back </a>
                    </div>
                      <form id="myform" role="form" action="" onsubmit="return false" method="post" class="form mb-5">

                        <div class="card mt-4">
                            <div class="card-header">
                              <div class="enquiry-header">Origin-Destination Details</div>
                            </div>
                            <div class="card-body">
                              <div class="row">
                                  <div class="col-md-6 col-sm-3">
                                      <div class="form-group origin">
                                          <label>Origin Country</label>
                                          <input type="text" class="form-control" placeholder="Country Name" id="orgin-country" autocomplete="off"/>
                                          <input type="hidden" name="orgincountry" id="orgincountry" value="" />
                                          <input type="hidden" name="send_type" value="{{$data['type']}}" />
                                          <input type="hidden" name="city_id" value="{{$data['city_id']}}" />
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-sm-3">
                                      <div class="form-group">
                                          <label>Origin Port</label>
                                          <select class="form-control select2" id="orgin-port" name="orginport"></select>
                                      </div>
                                  </div>
                              </div>


                              <div class="row mt-3">
                                  <div class="col-md-6 col-sm-3">
                                      <div class="form-group">
                                          <label>Destination Country</label>
                                          <input type="text" class="form-control" placeholder="Country Name" id="destination-country" autocomplete="off"/>
                                          <input type="hidden" id="destination-country-id" name="destinationcountry" value="" />
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-sm-3">
                                      <div class="form-group">
                                          <label>Destination Port</label>
                                          <select class="form-control select2" id="destination-port" name="destinationport"></select>
                                      </div>
                                  </div>
                              </div>

                            </div>
                          </div>


                          <div class="card mt-5">
                              <div class="card-header">
                                <div class="enquiry-header">Container Load Details</div>
                              </div>
                              <div class="card-body">

                          <div class="row mt-3 mt-3 load">

                            <div class="col-md-3 col-sm-3">
                              <div class="form-group">
                                  <label>Container Type</label>
                                    <select class="form-control select2" name="container_type[]" id="container-type1">
                                    <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/shipeaze/public_html/dev/resources/views/shipper/inquiries/create_fcl.blade.php</b> on line <b>81</b><br />
                                  </select>
                              </div>
                            </div>

                            <div class="col-md-2 col-sm-3">
                              <div class="form-group">
                                  <label>Quantity</label>
                                  <input type="number" min="1" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57" title="Numbers only" class="form-control" placeholder="Ex: 10" name="quantity[]" value="1" autocomplete="off"/>
                              </div>
                            </div>

                            <div class="col-md-2 col-sm-3">
                              <div class="form-group">
                                  <label>Weight (Ton)</label>
                                  <input type="text" class="form-control" placeholder="Ex: 1 TON" name="weight[]" autocomplete="off"/>
                              </div>
                            </div>

                            <div class="col-md-5 col-sm-3">
                              <div class="form-group float-left w-75">
                                  <label>Commodity*</label>
                                  <input type="text" class="form-control" placeholder="Ex: Rice, Spices" name="commodity[]" autocomplete="off"/>
                              </div>
                              <div class="form-group float-left w-25"></div>
                            </div>


                          </div>
                          <div class="addRow"></div>
                          <div class="row mt-3 mt-4">
                            <div class="float-left w-100 mt-3 mb-3">
                              <center>
                                <a href="javascript:void(0)" class="btn btn-outline-primary w-25 add_field">Add Another Load</a>
                              </center>
                            </div>
                          </div>
                          </div>
                          </div>



                          <div class="card mt-5">
                              <div class="card-header">
                                <div class="enquiry-header">Cargo Details</div>
                              </div>
                              <div class="card-body">

                              <div class="col-md-12 col-sm-3">
                                <div class="form-group">
                                    <label>Shipment Name</label>
                                    <input type="text" class="form-control" name="reference" placeholder="Project Name or Vendor Name etc.." autocomplete="off"/>
                                </div>
                              </div>

                              <div class="row mt-3 mt-3">
                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>Estimated Delivery Date</label>
                                      <input type="text" class="form-control datepicker" data-provide="datepicker" name="edd" data-date-format="dd MM yyyy" placeholder="Ex: 07 Apr 2025" autocomplete="off"/>
                                  </div>
                                </div>
                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>Cargo Ready Date</label>
                                      <input type="text" class="form-control datepicker" data-provide="datepicker" name="date" data-date-format="dd MM yyyy" placeholder="Ex: 07 Apr 2025" autocomplete="off"/>
                                  </div>
                                </div>
                              </div>

                              <div class="row mt-3 mt-3">
                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>Enquiry Type</label>
                                      <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                        <input id="enquiry1" type="radio" class="btn-check enquiry-type" name="enquirytype" autocomplete="off" value="1" checked>
                                        <label class="btn btn-outline-primary" for="enquiry1">I am Ready to Book</label>

                                        <input id="enquiry2" type="radio" class="btn-check enquiry-type" name="enquirytype" autocomplete="off" value="2">
                                        <label class="btn btn-outline-primary" for="enquiry2">I am just Comparing Prices</label>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>Prefered Liner Company</label>
                                      <input type="text" class="form-control datepicker" name="preference" placeholder="Maersk, Evergreen, etc" autocomplete="off"/>
                                  </div>
                                </div>
                              </div>

                              <div class="row mt-3 mt-3">
                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>Cargo Type</label>
                                      <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                        <input id="cargo-type1" type="radio" class="btn-check cargo-type" name="cargotype" autocomplete="off" value="1" checked>
                                        <label class="btn btn-outline-primary" for="cargo-type1">Non Hazardous</label>

                                        <input id="cargo-type2" type="radio" class="btn-check cargo-type" name="cargotype" autocomplete="off" value="2">
                                        <label class="btn btn-outline-primary" for="cargo-type2">Hazardous</label>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>Hazardous Classification</label>
                                      <select class="form-control select2" name="hazclass" id="haz-class" disabled>
                                        <optgroup label=""><option value="">Choose Class</option></optgroup>
                                        <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/shipeaze/public_html/dev/resources/views/shipper/inquiries/create_fcl.blade.php</b> on line <b>192</b><br />
                                      </select>
                                  </div>
                                </div>

                              </div>

                              <div class="row mt-3 mt-3 hazdesc" style="display: none">
                                <div class="col-md-12 col-sm-3">
                                  <div class="form-group">
                                    <label>Describe Hazardous Item</label>
                                    <textarea class="w-100 form-control" name="hazdes" id="haz-des" disabled></textarea>
                                  </div>
                                </div>
                              </div>

                              <div class="row mt-3 mt-3">
                                  <div class="col-md-6 col-sm-3">
                                      <div class="form-group">
                                          <label>Import Incoterm</label>
                                          <select class="form-control select2" name="importincoterm" id="import-incoterm">
                                            <option value=""></option>
                                            <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/shipeaze/public_html/dev/resources/views/shipper/inquiries/create_fcl.blade.php</b> on line <b>222</b><br />
                                          </select>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-sm-3">
                                    <div class="form-group">
                                        <label>Export Incoterm</label>
                                        <select class="form-control select2" name="exportincoterm" id="export-incoterm">
                                          <option value=""></option>
                                          <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/shipeaze/public_html/dev/resources/views/shipper/inquiries/create_fcl.blade.php</b> on line <b>233</b><br />
                                        </select>
                                    </div>
                                  </div>
                              </div>

                              <div class="row mt-3 mt-3">

                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>Stuffing Type</label>
                                      <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                        <input id="stuff-type1" type="radio" class="btn-check" name="stufftype" autocomplete="off" value="1" checked>
                                        <label class="btn btn-outline-primary" for="stuff-type1">Dock Stuffing</label>

                                        <input id="stuff-type2" type="radio" class="btn-check" name="stufftype" autocomplete="off" value="2">
                                        <label class="btn btn-outline-primary" for="stuff-type2">Factory Stuffing</label>
                                    </div>
                                  </div>
                                </div>
                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>Destuffing Type</label>
                                      <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                        <input id="destuff-type1" type="radio" class="btn-check" name="destufftype" autocomplete="off" value="1" checked>
                                        <label class="btn btn-outline-primary" for="destuff-type1">Dock Stuffing</label>

                                        <input id="destuff-type2" type="radio" class="btn-check" name="destufftype" autocomplete="off" value="2">
                                        <label class="btn btn-outline-primary" for="destuff-type2">Factory Stuffing</label>
                                    </div>
                                  </div>
                                </div>
                              </div>

                            </div>
                          </div>

                          <div class="card mt-5">
                              <div class="card-header">
                                <div class="enquiry-header">Trucking Services</div>
                              </div>
                              <div class="card-body">

                            <div class="row mt-3 mt-3">
                              <div class="col-md-6 col-sm-3">
                                <div class="form-group">
                                  <label>Do you need Trucking for Pick Up?</label>
                                  <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                    <input id="pickup1" type="radio" class="btn-check" name="pickup" autocomplete="off" value="1">
                                    <label class="btn btn-outline-primary" for="pickup1">Yes, I Need Pick Up</label>

                                    <input id="pickup2" type="radio" class="btn-check" name="pickup" autocomplete="off" value="2" checked>
                                    <label class="btn btn-outline-primary" for="pickup2">No, I Don't Need Pick Up</label>
                                </div>
                                </div>
                              </div>
                              <div class="col-md-6 col-sm-3">
                                <div class="form-group">
                                  <label>Do you need Trucking for Drop Off?</label>
                                  <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                    <input id="dropoff1" type="radio" class="btn-check" name="dropoff" autocomplete="off" value="1">
                                    <label class="btn btn-outline-primary" for="dropoff1">Yes, I Need Drop Off</label>

                                    <input id="dropoff2" type="radio" class="btn-check" name="dropoff" autocomplete="off" value="2" checked>
                                    <label class="btn btn-outline-primary" for="dropoff2">No, I Don't Need Drop Off</label>
                                </div>
                                </div>
                              </div>
                            </div>
                            <div class="row mt-3 mt-4 ">
                              <div class="col-md-3 col-sm-3">
                                <div class="form-group">
                                  <label>Choose Pickup Country</label>
                                  <select class="form-control select2 onpickup" name="pickupcountry" disabled id="pickup-country">
                                    <option value=""></option>
                                    <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/shipeaze/public_html/dev/resources/views/shipper/inquiries/create_fcl.blade.php</b> on line <b>310</b><br />
                                  </select>
                                </div>
                              </div>
                              <div class="col-md-3 col-sm-3">
                                <div class="form-group">
                                  <label>Choose Pickup City</label>
                                  <select class="form-control select2 onpickup" name="pickupcity" disabled id="pickup-city"></select>
                                </div>
                              </div>
                              <div class="col-md-3 col-sm-3">
                                <div class="form-group">
                                  <label>Choose Drop Off Country</label>
                                  <select class="form-control select2 dropoff" name="dropoffcountry" disabled id="dropoff-country">
                                    <option value=""></option>
                                    <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/shipeaze/public_html/dev/resources/views/shipper/inquiries/create_fcl.blade.php</b> on line <b>327</b><br />
                                  </select>
                                </div>
                              </div>
                              <div class="col-md-3 col-sm-3">
                                <div class="form-group">
                                  <label>Choose Drop Off City</label>
                                  <select class="form-control select2 dropoff" name="dropoffcity" disabled id="dropoff-city"></select>
                                </div>
                              </div>
                            </div>
                            <div class="row mt-3 mt-3">
                              <div class="col-md-6 col-sm-3">
                                <div class="form-group">
                                  <label>Pickup Address</label>
                                  <textarea class="w-100 form-control onpickup" name="pickupaddress" id="pickup-address" disabled></textarea>
                                </div>
                              </div>
                              <div class="col-md-6 col-sm-3 dropoff">
                                <div class="form-group">
                                  <label>Drop Off Address</label>
                                  <textarea class="w-100 form-control dropoff" name="dropoffaddress" id="dropoff-address" disabled></textarea>
                                </div>
                              </div>
                            </div>

                          </div>
                        </div>

                          <div class="card mt-5">
                              <div class="card-header">
                                <div class="enquiry-header">Other Services</div>
                              </div>
                              <div class="card-body">

                              <div class="row mt-3 mt-3">
                                  <div class="col-md-6 col-sm-3">
                                      <div class="form-group">
                                        <label>Do you need Custom Clearance at Origin?</label>
                                        <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                          <input id="clearance-origin1" type="radio" class="btn-check" name="clearanceorigin" autocomplete="off" value="1">
                                          <label class="btn btn-outline-primary" for="clearance-origin1">Yes, I Need Clearance</label>

                                          <input id="clearance-origin2" type="radio" class="btn-check" name="clearanceorigin" autocomplete="off" value="2" checked>
                                          <label class="btn btn-outline-primary" for="clearance-origin2">No, I Don't Need Clearance</label>
                                      </div>
                                      </div>
                                  </div>
                                  <div class="col-md-6 col-sm-3">
                                      <div class="form-group">
                                        <label>Do you need Custom Clearance at Destination?</label>
                                        <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                          <input id="clearance-destination1" type="radio" class="btn-check" name="clearancedestination" autocomplete="off" value="1">
                                          <label class="btn btn-outline-primary" for="clearance-destination1">Yes, I Need Clearance</label>

                                          <input id="clearance-destination2" type="radio" class="btn-check" name="clearancedestination" autocomplete="off" value="2" checked>
                                          <label class="btn btn-outline-primary" for="clearance-destination2">No, I Don't Need Clearance</label>
                                      </div>
                                      </div>
                                  </div>
                              </div>

                              <div class="row mt-3 mt-4">
                                <div class="col-md-6 col-sm-3">
                                  <div class="form-group">
                                      <label>HS Code</label>
                                      <input id="hscode" type="text" class="form-control" placeholder="Ex: HS000001, HS000002, HS000003..." id="hscode" name="hscode" disabled autocomplete="off"/>
                                  </div>
                                </div>
                                  <div class="col-md-6 col-sm-3">
                                    <div class="form-group">
                                      <label>Do you need Marine Insurance?</label>
                                      <div class="btn-group w-100" role="group" aria-label="Basic radio toggle button group ">
                                        <input id="insurance1" type="radio" class="btn-check" name="insurance" autocomplete="off" value="1">
                                        <label class="btn btn-outline-primary" for="insurance1">Yes, I Need Insurance</label>

                                        <input id="insurance2" type="radio" class="btn-check" name="insurance" autocomplete="off" value="2" checked>
                                        <label class="btn btn-outline-primary" for="insurance2">No, I Don't Need Insurance</label>
                                    </div>
                                    </div>
                                  </div>

                              </div>
                              </div>
                            </div>

                            <div class="card mt-5">
                                <div class="card-header">
                                  <div class="enquiry-header">Credit Terms</div>
                                </div>
                                <div class="card-body">
                                  <div style="height: 150px" class="editor"></div>
                                </div>
                            </div>

                            <div class="card mt-5">
                                <div class="card-header">
                                  <div class="enquiry-header">Choose Enquiry Validity</div>
                                </div>
                                <div class="card-body">
                                  <center style="display: none">
                                    <div class="btn-group" role="group" aria-label="Basic radio toggle button group">
                                      <input type="radio" class="btn-check" name="enquiry_type" id="btnradio1" autocomplete="off" value="1" checked>
                                      <label class="btn btn-outline-primary" for="btnradio1">Enquiry By Bidding </label>

                                      <input type="radio" class="btn-check" name="enquiry_type" id="btnradio2" value="2" autocomplete="off">
                                      <label class="btn btn-outline-primary" for="btnradio2">Direct Enquiry</label>
                                    </div>
                                    </center>

                                    <div id="enquiry_type_1" class="float-left w-100">

                                        <center>
                                          <div style="display: none"><label><b>Choose Bidding Period</b></label></div>
                                          <br>
                                          <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" id="inlineCheckbox1" value="12" name="bidding_period" checked>
                                            <label class="form-check-label" for="inlineCheckbox1">12 Hours</label>
                                          </div>
                                          <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" id="inlineCheckbox2" value="24" name="bidding_period">
                                            <label class="form-check-label" for="inlineCheckbox2">24 Hours</label>
                                          </div>
                                          <div class="form-check form-check-inline">
                                            <input class="form-check-input" type="radio" id="inlineCheckbox3" value="36" name="bidding_period">
                                            <label class="form-check-label" for="inlineCheckbox3">36 Hours</label>
                                          </div>
                                          <p class="mt-4"> <b> Note: </b> Freight Forwarders are allowed to send your their offers within this period </p>
                                        </center>
                                    </div>
                                    <div id="enquiry_type_2" class="float-left w-100 mt-4 mb-4" style="display: none">
                                      <center>
                                        <div class="float-left w-50 show-freights w-100">
                                        <div> <label><b>Choose Your Freight Forwarding Companies</b></label> </div>
                                          <br>
                                          <select class="multi_freights form-control select2 w-100" name="multi_freights[]" multiple="multiple">
                                            <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/shipeaze/public_html/dev/resources/views/shipper/inquiries/create_fcl.blade.php</b> on line <b>465</b><br />
                                          </select>

                                        </div>
                                      </center>
                                    </div>



                                </div>
                            </div>

                            <div class="row mt-3 mt-5">
                              <center>
                                <div class="form-group">
                                  <label>Additional Notes/Instructions</label>
                                  <textarea class="w-50  form-control" name="notes" id="notes"></textarea>
                                </div>
                              </center>
                            </div>


                              <div class="col-12 mt-5">
                                <center>
                                  <input type="hidden" name="_token" value="{{ csrf_token() }}">
                                  <input type="hidden" name="enquiry_no" value="{{ $data['enquiry_no'] }}">
                                  <button type="submit" class="btn btn-primary"> Create Enquiry </button>
                                </center>
                              </div>


                      </form>
                  </div>
              </div>
          </div>
      </div>

    </div>
    </div>

    <div class="col"></div>
  </div>


<input type="hidden" id="step" value="step1" />
<input type="hidden" id="loadtype" value="fcl" />
<input type="hidden" id="container-type" value="1" />
<script>

$(window).on('load', function() {
    $( ".form input" ).attr('autocomplete', 'new-password');

});




$(function () {
  $( "#orgin-country" ).autocomplete({
    source: "/datasource/countries",
    minLength: 2,
    select: function( event, ui ) {
      $('#orgincountry').val(ui.item.iso2);
      $("#orgin-country" ).val(ui.item.name);
      $.ajax({
        url: "/datasource/ports/"+ui.item.iso2,
        type: "GET",
        success: function (res) {
          $('#orgin-port').html(res);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log(textStatus, errorThrown);
        }
      });
      return false;
    },
  }).autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
      .append( "<div>" + item.name + "</div>" )
      .appendTo( ul );
  };;

  $( "#destination-country" ).autocomplete({
    source: "/datasource/countries",
    minLength: 2,
    select: function( event, ui ) {
      $('#destination-country-id').val(ui.item.iso2);
      $("#destination-country" ).val(ui.item.name);
      $.ajax({
        url: "/datasource/ports/"+ui.item.iso2,
        type: "GET",
        success: function (res) {
          $('#destination-port').html(res);
        },
        error: function(jqXHR, textStatus, errorThrown) {
          console.log(textStatus, errorThrown);
        }
      });
      return false;
    },
  }).autocomplete( "instance" )._renderItem = function( ul, item ) {
    return $( "<li>" )
      .append( "<div>" + item.name + "</div>" )
      .appendTo( ul );
  };;
});


$(document).ready(function() {
    $('.select2').select2();


$('.cargo-type').change(function(){
    var id = $(this).val();
    if(id == 2) {
      $('#haz-class').removeAttr('disabled');
      $('#haz-des').removeAttr('disabled');
      $('.hazdesc').show();
    } else {
      $('#haz-class').attr('disabled', 'disabled');
      $('#haz-des').attr('disabled', 'disabled');
      $('.hazdesc').hide();
    }
})

$('#pickup-country').change(function(){
  var pickupcountry = $(this).val();
  $.ajax({
    url: "/datasource/cities/"+pickupcountry,
    type: "GET",
    success: function (res) {
      $('#pickup-city').html(res);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  });
});

$('#dropoff-country').change(function(){
  var dropoff = $(this).val();
  $.ajax({
    url: "/datasource/cities/"+dropoff,
    type: "GET",
    success: function (res) {
      $('#dropoff-city').html(res);
    },
    error: function(jqXHR, textStatus, errorThrown) {
      console.log(textStatus, errorThrown);
    }
  });
});


$("[name='clearanceorigin']").change(function(){
  var clearance = $(this).val();
  if(clearance == 1) {
    $('#hscode').removeAttr('disabled');
  } else {
    $('#hscode').attr('disabled', 'disabled');
  }
})

$("[name='clearancedestination']").change(function(){
  var clearance = $(this).val();
  if(clearance == 1) {
    $('#hscode').removeAttr('disabled');
  } else {
    $('#hscode').attr('disabled', 'disabled');
  }
})

$("[name='pickup']").change(function(){
  var pickup = $(this).val();
  if(pickup == 1) {
    $('.onpickup').removeAttr('disabled');
  } else {
    $('.onpickup').attr('disabled', 'disabled');
  }
})

$("[name='dropoff']").change(function(){
  var pickup = $(this).val();
  if(pickup == 1) {
    $('.dropoff').removeAttr('disabled');
  } else {
    $('.dropoff').attr('disabled', 'disabled');
  }
})

});


$(document).ready(function() {
  var add_button = $(".add_field");
  var wrapper = $(".load");
  $(add_button).click(function(e) {
  var containerType = $('#container-type').val();
  var id = parseInt(containerType) + 1;
  $('#container-type').val(id);
  var row = '<div class="row mt-3 mt-3 load"> <div class="col-md-3 col-sm-3"> <div class="form-group"> <label>Container Type</label> <select class="form-control select2" name="container_type[]" id="container-type'+id+'"> <br />
<b>Warning</b>:  Invalid argument supplied for foreach() in <b>/home/shipeaze/public_html/dev/resources/views/shipper/inquiries/create_fcl.blade.php</b> on line <b>667</b><br />
 </select> </div> </div> <div class="col-md-2 col-sm-3"> <div class="form-group"> <label>Quantity*</label> <input type="text" class="form-control"  placeholder="Ex: 10" name="quantity[]"  min="1" step="1" onkeypress="return event.charCode >= 48 && event.charCode <= 57" value="1" autocomplete="off"/> </div> </div> <div class="col-md-2 col-sm-3"> <div class="form-group"> <label>Weight (Ton)*</label> <input type="text" class="form-control" placeholder="Ex: 1 TON" name="weight[]" autocomplete="off"/> </div> </div> <div class="col-md-5 col-sm-3"> <div class="form-group float-left w-75"> <label>Commodity*</label> <input type="text" class="form-control" placeholder="Ex: Rice, Spices" name="commodity[]" autocomplete="off"/> </div> <div class="form-group float-left w-25"> <a class="float-left mt-4 pt-2 text-center w-100 link-danger remove_field" onclick="deleteRow(this)" href="javascript:void(0)"> <i class="fa-solid fa-trash-can"></i> </a> </div> </div> </div>';
    $('.addRow').append(row);
    $('.select2').select2();
  });



})

function deleteRow(id) {
  var x = confirm("Are you sure you want to delete?");
  if (x){
    $(id).parent().parent().parent().remove();
     x--;
  }
}

$("#myform").validate({
  rules: {
   orgincountry: "required",
   importincoterm: "required",
   exportincoterm: "required",
   orginport: "required",
   destinationcountry: "required",
   destinationport: "required",
   date: "required",
   pickupcountry: "required",
   pickupcity: "required",
   dropoffcountry: "required",
   dropoffcity: "required",
   pickupaddress: "required",
   dropoffaddress: "required",
   reference: "required",
   'weight[]': "required",
   'commodity[]': "required",
   'quantity[]': "required",
   'multi_freights[]': "required",
 },
 errorPlacement: function(error, element) {

    $('select').each(function(){
      var id = $(this).attr('id');
      $(this).next().addClass(id);
    })

    $(":input[name*='[']").each(function() {
        // this.name = this.name.replace(/[d+]/, '[]');
     })

    if (element.attr("name") == "orginport") {
      error.insertAfter('.orgin-port');
    }
    else if (element.attr("name") == "destinationport") {
      error.insertAfter('.destination-port');
    }
    else if (element.attr("name") == "pickupcountry") {
      error.insertAfter('.pickup-country');
    }
    else if (element.attr("name") == "pickupcity") {
        error.insertAfter('.pickup-city');
    }
    else if (element.attr("name") == "dropoffcountry") {
      error.insertAfter('.dropoff-country');
    }
    else if (element.attr("name") == "dropoffcity") {
      error.insertAfter('.dropoff-city');
    }
    else if (element.attr("name") == "importincoterm") {
      error.insertAfter('.import-incoterm');
    }
    else if (element.attr("name") == "exportincoterm") {
      error.insertAfter('.export-incoterm');
    }
     else {
      error.insertAfter(element);
    }
  },
 submitHandler: function(form) {
   // some other code
   // maybe disabling submit button
   // then:
   var form = $('#myform');
   var editor = quill.root.innerHTML;

   $.ajax({
       type: "POST",
       url: "/shipper/form_create_enquiry",
       data: form.serialize() + "&credit_terms=" + editor,
       success: function(data)
       {
         window.location.href = "/shipper/view_enquiry/{{$data['enquiry_no']}}";
       }
   });

   //$('#myform').submit();
 }
});

$("[name='enquiry_type']").change(function(){
  var enquiry_type = $(this).val();
  if(enquiry_type == 2) {
    $('#enquiry_type_2').show();
    $('#enquiry_type_1').hide();
    $('.multi_freights').removeAttr('disabled');
  } else {
    $('#enquiry_type_1').show();
    $('#enquiry_type_2').hide();
    $('.multi_freights').attr('disabled', 'disabled');
  }
})

  $(document).ready(function() {
    $('.multi_freights').select2({ width: '100%' });
  });

  </script>

@endsection