Here is the form for the shipment, create me a function to send the data to our shipment controller

<div class="needs-validation position-relative" novalidate>
            <!-- start contact-->
            <div class="d-flex justify-content-s flex-wrap mb-4">
              <div class="d-flex align-items-center">
                <input
                  id="contract-value"
                  type="text"
                  class="form-control"
                  placeholder="Contract ID"
                  value=""
                  required
                  disabled
                />
                <div class="form-check form-check-inline">
                  <!-- Button trigger modal -->
                  <button
                    type="button"
                    class="btn btn-outline-danger btn-sm"
                    data-bs-toggle="modal"
                    data-bs-target="#contractModal"
                  >
                    Search
                  </button>
                  <!-- Modal -->
                  <div
                    class="modal fade"
                    id="contractModal"
                    tabindex="-1"
                    aria-labelledby="contract-id"
                    aria-hidden="true"
                  >
                    <div class="modal-dialog modal-lg">
                      <div class="modal-content">
                        <div class="modal-header">
                          <h5 class="modal-title" id="contract-id">
                            Contract Search
                          </h5>
                          <button
                            type="button"
                            class="btn-close"
                            data-bs-dismiss="modal"
                            aria-label="Close"
                          ></button>
                        </div>
                        <div class="modal-body">
                          <div class="table-responsive">
                            <table class="table">
                              <thead>
                                <tr>
                                  <th>Contract ID</th>
                                  <th>Select</th>
                                </tr>
                              </thead>
                              <tbody>
                                <tr>
                                  <td>41a2144f-3fee-ed11-8981-005056b358ac</td>
                                  <td class="select-checkbox">
                                    <input
                                      class="form-check-input"
                                      type="checkbox"
                                      value="41a2144f-3fee-ed11-8981-005056b358ac"
                                      name="contract-id"
                                    />
                                  </td>
                                </tr>
                                <tr>
                                  <td>eb91c2d9-edef-ed11-8981-005056b358ac</td>
                                  <td class="select-checkbox">
                                    <input
                                      class="form-check-input"
                                      type="checkbox"
                                      value="eb91c2d9-edef-ed11-8981-005056b358ac"
                                      name="contract-id"
                                    />
                                  </td>
                                </tr>
                                <tr>
                                  <td>459e7281-2405-ee11-8985-005056b358ac</td>
                                  <td class="select-checkbox">
                                    <input
                                      class="form-check-input"
                                      type="checkbox"
                                      value="459e7281-2405-ee11-8985-005056b358ac"
                                      name="contract-id"
                                    />
                                  </td>
                                </tr>
                              </tbody>
                            </table>
                          </div>
                        </div>
                        <div class="modal-footer">
                          <button
                            type="button"
                            class="btn btn-secondary"
                            data-bs-dismiss="modal"
                          >
                            Close
                          </button>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <!-- End contract-->

            <div class="form-overlay"></div>
            <div class="d-flex justify-content-between flex-wrap mb-4">
              <div class="d-flex align-items-center gap-4">
                <div class="light-box">
                  <p>Receiver</p>
                </div>
                <div class="form-check form-check-inline">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="receiver"
                    id="internal"
                    value="internal"
                    checked
                    required
                  />
                  <label class="form-check-label" for="internal"
                    >Internal</label
                  >
                </div>
                <div class="form-check form-check-inline">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="receiver"
                    id="external"
                    value="external"
                    required
                  />
                  <label class="form-check-label" for="external"
                    >External</label
                  >
                </div>
              </div>
              <div class="form-check form-check-inline">
                <div class="row">
                  <div class="col-auto">
                    <input
                      class="form-check-input"
                      type="checkbox"
                      id="save"
                      value="save"
                    />
                    <label class="form-check-label" for="save"
                      >Keep customer data after save</label
                    >
                  </div>
                  <div class="col">
                    <div class="me-2">
                      <button type="reset" class="btn btn-danger btn-sm">
                        Clear All Fields
                      </button>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div class="general-box mb-4">
              <div class="row justify-content-end mb-2">
                <div class="col-auto">
                  <div class="mt-2 mb-2">
                    <button
                      type="button"
                      class="btn btn-secondary btn-sm m-0"
                      style="width: 15rem; font-size: 14px"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal5"
                    >
                      <img
                        src="imgs/search-icon-light.svg"
                        style="width: 14px"
                      />
                      Search existing customers
                    </button>

                    <!-- Modal -->
                    <div
                      class="modal fade"
                      id="exampleModal5"
                      tabindex="-1"
                      aria-labelledby="exampleModalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">
                              Search existing customers
                            </h5>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <div class="row">
                              <div class="col-md-6">
                                <label for="name_1" class="mb-2"
                                  >Name of the corporate/person</label
                                >
                                <input
                                  id="name_1"
                                  type="text"
                                  class="form-control"
                                  placeholder="Name"
                                  value=""
                                  required
                                />
                              </div>
                              <div class="col-md-6">
                                <label for="mobile_1" class="mb-2"
                                  >Mobile number</label
                                >

                                <input
                                  id="mobile_1"
                                  type="text"
                                  class="form-control"
                                  placeholder="Ex. 966XXXXXX"
                                  value=""
                                  required
                                />
                              </div>
                            </div>
                            <button
                              type="button"
                              class="btn btn-primary mt-3"
                              style="margin: 0; width: 4.5rem"
                            >
                              Search
                            </button>
                            <hr class="my-4" />
                            <div class="table-responsive">
                              <table class="table">
                                <thead>
                                  <tr>
                                    <th>Name of the corporate/person</th>
                                    <th>Mobile number</th>
                                    <th>Select</th>
                                  </tr>
                                </thead>
                              </table>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-secondary"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
              <div class="row">
                <div data-group="internal" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="customer-type">Customer type</label>
                    <select
                      id="customer-type"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="individual">
                        Individual- institutions and companies
                      </option>
                      <option value="governmental">Governmental Entity</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>

                <div class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="receiver-name">Receiver name</label>
                    <input
                      id="receiver-name"
                      type="text"
                      class="form-control"
                      placeholder="Enter receiver name"
                      value=""
                      required
                    />
                    <div class="invalid-feedback">
                      Please enter receiver name.
                    </div>
                  </div>
                </div>

                <div class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="receiver-mobile">Receiver mobile number</label>
                    <input
                      id="receiver-mobile"
                      type="text"
                      class="form-control"
                      placeholder="Enter receiver mobile number"
                      value=""
                      required
                    />
                    <div class="invalid-feedback">
                      Please enter receiver mobile number.
                    </div>
                  </div>
                </div>

                <div data-group="external" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="identity-type">Identity type</label>
                    <select
                      id="identity-type"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="Mandate (delivery order)">
                        Mandate (delivery order)
                      </option>
                      <option value="Proforma Invoice">Proforma Invoice</option>
                      <option value="Identity Card">Identity Card</option>
                      <option value="Commercial Invoice">
                        Commercial Invoice
                      </option>
                      <option value="Passport">Passport</option>
                      <option value="Driving License">Driving License</option>
                      <option value="Export License">Export License</option>
                      <option value="Certificate of origin">
                        Certificate of origin
                      </option>
                      <option value="Preference certificate of origin">
                        Preference certificate of origin
                      </option>
                      <option value="Import License">Import License</option>
                      <option value="Related document">Related document</option>
                      <option value="Certificate">Certificate</option>
                      <option value="Invoice">Invoice</option>
                      <option value="License">License</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>

                <div
                  data-group="external"
                  data-input="optional"
                  class="col-md-6 col-lg-4"
                >
                  <div class="form-group">
                    <label for="document-number">Document Number</label>
                    <input
                      id="document-number"
                      type="text"
                      class="form-control"
                      placeholder="Enter Document Number"
                      value=""
                    />
                    <div class="invalid-feedback">
                      Please enter Document Number.
                    </div>
                  </div>
                </div>

                <div data-group="external" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="country">Country</label>
                    <select
                      id="country"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="country1">country</option>
                      <option value="country2">country</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>

                <div data-group="external" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="external-city">City</label>
                    <select
                      id="external-city"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="City1">City</option>
                      <option value="City2">City</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>

                <div
                  data-group="external"
                  data-input="optional"
                  class="col-md-6 col-lg-4"
                >
                  <div class="form-group">
                    <label for="external-address">Address</label>
                    <input
                      id="external-address"
                      type="text"
                      class="form-control"
                      placeholder="Address"
                      value=""
                    />
                  </div>
                </div>

                <div
                  data-group="external"
                  data-input="optional"
                  class="col-md-6 col-lg-4"
                >
                  <div class="form-group">
                    <label for="external-zipcode">Zip Code</label>
                    <input
                      id="external-zipcode"
                      type="text"
                      class="form-control"
                      placeholder="Zip Code"
                      value=""
                    />
                  </div>
                </div>

                <div
                  data-group="external"
                  data-input="optional"
                  class="col-md-6 col-lg-4"
                >
                  <div class="form-group">
                    <label for="external-mailbox">Mailbox</label>
                    <input
                      id="external-mailbox"
                      type="email"
                      class="form-control"
                      placeholder="Mailbox"
                      value=""
                    />
                  </div>
                </div>
              </div>

              <div data-group="internal" class="mb-4 form-group">
                <label class="d-block mb-2">Choose address type</label>
                <div class="d-flex justify-content-between flex-wrap">
                  <div class="form-check form-check-inline">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="address-type"
                      id="national"
                      value="national"
                      required
                    />
                    <label class="form-check-label" for="national"
                      >National ID</label
                    >
                  </div>
                  <div class="form-check form-check-inline">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="address-type"
                      id="mailbox"
                      value="mailbox"
                      required
                    />
                    <label class="form-check-label" for="mailbox"
                      >Mailbox</label
                    >
                  </div>
                  <div class="form-check form-check-inline">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="address-type"
                      id="parcel"
                      value="parcel"
                      required
                    />
                    <label class="form-check-label" for="parcel"
                      >Parcel station</label
                    >
                  </div>
                  <div class="form-check form-check-inline">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="address-type"
                      id="delivery"
                      value="delivery"
                      required
                    />
                    <label class="form-check-label" for="delivery"
                      >Office delivery</label
                    >
                  </div>
                  <div class="form-check form-check-inline">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="address-type"
                      id="descriptive"
                      value="descriptive"
                      required
                    />
                    <label class="form-check-label" for="descriptive"
                      >Descriptive Address</label
                    >
                  </div>
                </div>
              </div>

              <div class="row" data-group="national">
                <div class="col-auto">
                  <div class="form-group">
                    <button
                      type="button"
                      class="btn btn-primary btn-sm text-white m-0"
                      style="width: 15rem; font-size: 14px"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal1"
                    >
                      <img
                        src="imgs/search-icon-light.svg"
                        style="width: 14px"
                      />
                      Search by mobile number
                    </button>

                    <!-- Modal -->
                    <div
                      class="modal fade"
                      id="exampleModal1"
                      tabindex="-1"
                      aria-labelledby="exampleModalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">
                              Search by mobile number
                            </h5>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <div class="row">
                              <div class="col-md-6">
                                <label for="mobile_1" class="mb-2"
                                  >Mobile number</label
                                >

                                <input
                                  id="mobile_1"
                                  type="text"
                                  class="form-control"
                                  placeholder="Ex. 966XXXXXX"
                                  value=""
                                  required
                                />
                              </div>
                            </div>
                            <button
                              type="button"
                              class="btn btn-primary mt-3"
                              style="margin: 0; width: 4.5rem"
                            >
                              Search
                            </button>
                            <hr class="my-4" />
                            <div class="table-responsive">
                              <table class="table">
                                <thead>
                                  <tr>
                                    <th>Name of the corporate/person</th>
                                    <th>Mobile number</th>
                                    <th>Select</th>
                                  </tr>
                                </thead>
                              </table>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-secondary"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-auto">
                  <div class="form-group">
                    <button
                      type="button"
                      class="btn btn-primary btn-sm text-white m-0"
                      style="width: 15rem; font-size: 14px"
                      data-bs-toggle="modal"
                      data-bs-target="#exampleModal2"
                    >
                      <img
                        src="imgs/search-icon-light.svg"
                        style="width: 14px"
                      />
                      Search by identity number
                    </button>

                    <!-- Modal -->
                    <div
                      class="modal fade"
                      id="exampleModal2"
                      tabindex="-1"
                      aria-labelledby="exampleModalLabel"
                      aria-hidden="true"
                    >
                      <div class="modal-dialog modal-lg">
                        <div class="modal-content">
                          <div class="modal-header">
                            <h5 class="modal-title" id="exampleModalLabel">
                              Search by identity number
                            </h5>
                            <button
                              type="button"
                              class="btn-close"
                              data-bs-dismiss="modal"
                              aria-label="Close"
                            ></button>
                          </div>
                          <div class="modal-body">
                            <div class="row">
                              <div class="col-md-6">
                                <label for="name_1" class="mb-2"
                                  >Identity number</label
                                >
                                <input
                                  id="name_1"
                                  type="text"
                                  class="form-control"
                                  placeholder="National ID"
                                  value=""
                                  required
                                />
                              </div>
                            </div>
                            <button
                              type="button"
                              class="btn btn-primary mt-3"
                              style="margin: 0; width: 4.5rem"
                            >
                              Search
                            </button>
                            <hr class="my-4" />
                            <div class="table-responsive">
                              <table class="table">
                                <thead>
                                  <tr>
                                    <th>Name of the corporate/person</th>
                                    <th>Mobile number</th>
                                    <th>Select</th>
                                  </tr>
                                </thead>
                              </table>
                            </div>
                          </div>
                          <div class="modal-footer">
                            <button
                              type="button"
                              class="btn btn-secondary"
                              data-bs-dismiss="modal"
                            >
                              Close
                            </button>
                          </div>
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
              </div>

              <div class="row">
                <div data-group="mailbox national" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="zip-code">ZIP code</label>
                    <input
                      id="zip-code"
                      type="text"
                      class="form-control"
                      placeholder="Enter ZIP code"
                      value=""
                    />
                    <div class="invalid-feedback">Please enter ZIP code.</div>
                  </div>
                </div>

                <div
                  data-group="mailbox parcel delivery descriptive"
                  class="col-md-6 col-lg-4"
                >
                  <div class="form-group">
                    <label for="city">City</label>
                    <select
                      id="city"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="City1">City</option>
                      <option value="City2">City</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>

                <div data-group="mailbox" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="mailbox-data">MailBox</label>
                    <input
                      id="mailbox-data"
                      type="text"
                      class="form-control"
                      placeholder="Enter Mailbox"
                      value=""
                    />
                    <div class="invalid-feedback">Please enter Mailbox.</div>
                  </div>
                </div>

                <div data-group="national" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="address">Short address</label>
                    <input
                      id="address"
                      type="text"
                      class="form-control"
                      placeholder="Short address"
                      value=""
                      required
                    />
                    <div class="invalid-feedback">
                      Please enter short address.
                    </div>
                  </div>
                </div>

                <div data-group="national" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="building-number">Building number</label>
                    <input
                      id="building-number"
                      type="text"
                      class="form-control"
                      placeholder="Enter building number"
                      value=""
                      required
                    />
                    <div class="invalid-feedback">
                      Please enter building number.
                    </div>
                  </div>
                </div>

                <div data-group="national" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="additional-number">Additional number</label>
                    <input
                      id="additional-number"
                      type="text"
                      class="form-control"
                      placeholder="Enter additional number"
                      value=""
                      required
                    />
                    <div class="invalid-feedback">
                      Please enter additional number.
                    </div>
                  </div>
                </div>

                <div
                  data-group="national"
                  data-input="optional"
                  class="col-md-6 col-lg-4"
                >
                  <div class="form-group">
                    <label for="unit-number">Unit number</label>
                    <input
                      id="unit-number"
                      type="text"
                      class="form-control"
                      placeholder="Enter unit number"
                      value=""
                      required
                    />
                    <div class="invalid-feedback">
                      Please enter unit number.
                    </div>
                  </div>
                </div>

                <div data-group="parcel" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="parcel-station">Parcel Station</label>
                    <select
                      id="parcel-station"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="station1">Station 1</option>
                      <option value="station2">Station 2</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>

                <div data-group="delivery" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="office">Office</label>
                    <select
                      id="office"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="office1">Office 1</option>
                      <option value="office2">Office 2</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>

                <div data-group="descriptive" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="district">District</label>
                    <select
                      id="district"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="district1">District 1</option>
                      <option value="district2">District 2</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>
                <div data-group="descriptive" class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="street-name">Street Name</label>
                    <input
                      id="street-name"
                      type="text"
                      class="form-control"
                      placeholder="Enter Street Name"
                      value=""
                      required
                    />
                    <div class="invalid-feedback">
                      Please enter Street Name.
                    </div>
                  </div>
                </div>
                <div
                  data-group="descriptive"
                  data-input="optional"
                  class="col-md-6 col-lg-4"
                >
                  <div class="form-group">
                    <label for="nearest-landmark">Nearest Landmark</label>
                    <input
                      id="nearest-landmark"
                      type="text"
                      class="form-control"
                      placeholder="Enter Nearest Landmark"
                      value=""
                    />
                    <div class="invalid-feedback">
                      Please enter Nearest Landmark.
                    </div>
                  </div>
                </div>
              </div>
            </div>
            <div
              data-group="internal"
              class="d-flex justify-content-between flex-wrap mb-4"
            >
              <div class="d-flex align-items-center gap-4">
                <div class="light-box">
                  <p>Shipment</p>
                </div>
                <div class="form-check form-check-inline">
                  <input
                    class="form-check-input"
                    type="radio"
                    name="shipment"
                    id="normal"
                    value="Parcel Information"
                    required
                  />
                  <label class="form-check-label" for="normal"
                    >Parcel Information</label
                  >
                </div>
              </div>
              <div data-input="optional" class="form-check form-check-inline">
                <input
                  class="form-check-input"
                  type="checkbox"
                  id="save_shipment"
                  value="save shipment"
                />
                <label class="form-check-label" for="save_shipment"
                  >Keep shipment data after save</label
                >
              </div>
            </div>
            <div class="general-box">
              <div class="row">
                <div class="col-md-12 col-lg-6">
                  <div class="row">
                    <div class="col-md-6 col-lg-6">
                      <div class="form-group">
                        <label for="shipment-type">Shipment type</label>
                        <select
                          id="shipment-type"
                          class="form-select form-control"
                          data-placeholder="Please Select"
                        >
                          <option></option>
                          <option value="Shipment less than 5 kilos">
                            Shipment less than 5 kilos
                          </option>
                          <option value="Shipment more than 5 kilos">
                            Shipment more than 5 kilos
                          </option>
                        </select>
                        <div class="invalid-feedback">
                          Please select shipment type.
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6 col-lg-6">
                      <div class="form-group">
                        <label for="shipment-weight"
                          >Shipment weight / gm</label
                        >
                        <input
                          id="shipment-weight"
                          type="text"
                          class="form-control"
                          placeholder="Enter shipment weight / gm"
                          value=""
                          required
                        />
                        <div class="invalid-feedback">
                          Please enter shipment weight / gm.
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6 col-lg-6">
                      <div class="form-group">
                        <label for="reference-id">Reference ID</label>
                        <input
                          id="reference-id"
                          type="text"
                          class="form-control"
                          placeholder="Enter reference ID"
                          value=""
                        />
                        <div class="invalid-feedback">
                          Please enter reference ID.
                        </div>
                      </div>
                    </div>
                    <div class="col-md-6 col-lg-6">
                      <div class="form-group">
                        <label for="shipment-content"
                          >Shipment content type</label
                        >
                        <select
                          id="shipment-content"
                          class="form-select form-control"
                          data-placeholder="Please Select"
                          required
                        >
                          <option></option>
                          <option value="Food">Food</option>
                          <option value="Clothes">Clothes</option>
                          <option value="Electric Devices">
                            Electric Devices
                          </option>
                          <option value="Electronic Devices">
                            Electronic Devices
                          </option>
                          <option value="Medicine">Medicine</option>
                          <option value="Children Toys">Children Toys</option>
                          <option value="Paper and Documents">
                            Paper and Documents
                          </option>
                          <option value="Other">Other</option>
                        </select>
                        <div class="invalid-feedback">
                          Please select shipment content type.
                        </div>
                      </div>
                    </div>
                  </div>
                </div>
                <div class="col-md-12 col-lg-6">
                  <div class="form-group h-75">
                    <label for="shipment-description"
                      >Shipment Content Description</label
                    >
                    <textarea
                      id="shipment-description"
                      class="form-control h-100"
                      rows="5"
                      placeholder="Enter Shipment Content Description"
                    ></textarea>
                    <div class="invalid-feedback">
                      Please enter shipment description.
                    </div>
                  </div>
                </div>
              </div>
              <div data-group="external" class="row">
                <div class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="origin-country">Origin Country</label>
                    <select
                      id="origin-country"
                      class="form-select form-control"
                      data-placeholder="Please Select"
                      required
                    >
                      <option></option>
                      <option value="country1">country</option>
                      <option value="country2">country</option>
                    </select>
                    <div class="invalid-feedback">
                      Please select a valid state.
                    </div>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4">
                  <div class="form-group">
                    <label for="content-price">Content Price</label>
                    <input
                      id="content-price"
                      type="number"
                      class="form-control"
                      min="0"
                      oninput="this.value = Math.abs(this.value)"
                      placeholder="Content Price"
                      value=""
                    />
                    <div class="invalid-feedback">
                      Please enter Content Price.
                    </div>
                  </div>
                </div>
              </div>
              <div data-group="internal" class="row">
                <div class="col-md-6 col-lg-4 form-group">
                  <label class="mb-2">Cash On Delivery</label>
                  <div class="form-check mb-2">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="cash-on-delivery"
                      id="cash-yes"
                      value="Yes"
                      required
                    />
                    <label class="form-check-label" for="cash-yes">Yes</label>
                  </div>
                  <div class="form-check mb-2">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="cash-on-delivery"
                      id="cash-no"
                      value="No"
                      required
                    />
                    <label class="form-check-label" for="cash-no">No</label>
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 form-group">
                  <label class="mb-2">Refrigerated</label>
                  <div class="form-check mb-2">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="refrigerated"
                      id="refrigerated-yes"
                      value="Yes"
                      required
                    />
                    <label class="form-check-label" for="refrigerated-yes"
                      >Yes</label
                    >
                  </div>
                  <div class="form-check mb-2">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="refrigerated"
                      id="refrigerated-no"
                      value="No"
                      required
                    />
                    <label class="form-check-label" for="refrigerated-no"
                      >No</label
                    >
                  </div>
                </div>
                <div class="col-md-6 col-lg-4 form-group">
                  <label class="mb-2">Delivery Type</label>
                  <div class="form-check mb-2">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="delivery-type"
                      id="regular-delivery"
                      value="Regular delivery"
                      required
                    />
                    <label class="form-check-label" for="regular-delivery"
                      >Regular delivery</label
                    >
                  </div>
                  <div class="form-check mb-2">
                    <input
                      class="form-check-input"
                      type="radio"
                      name="delivery-type"
                      id="express-delivery"
                      value="Express delivery"
                      required
                    />
                    <label class="form-check-label" for="express-delivery"
                      >Express delivery</label
                    >
                  </div>
                </div>
                <div id="amount-field" class="col-md-6 col-lg-4 d-none">
                  <div class="form-group">
                    <label for="amount">Amount</label>
                    <input
                      id="amount"
                      type="number"
                      class="form-control"
                      placeholder="Enter Amount"
                      value=""
                    />
                    <div class="invalid-feedback">Please enter Amount.</div>
                  </div>
                </div>
              </div>
            </div>
            <div class="d-flex justify-content-end">
              <button
                onclick="CreateShipment()"
                class="btn btn-primary w-auto my-3 mx-0"
              >
                Create shipment
              </button>
            </div>
          </div>